如何将常见CSS样式一次性应用于多个Shadow Roots？

Question

7

考虑到我有一些使用Shadow DOM隐藏其内部div-soup和布局的元素。

尽管它们是不同的，但它们共享相同的CSS样式表，因为它们使用的是应该以一致方式进行样式化的同一组元素。例如，这可能是一个CSS框架（bootstrap）。

问题在于这个样式表非常大。

在许多Shadow Roots之间共享如此庞大的样式表的最有效方法是什么？

- tomalec

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

更新：2019年 - 使用构造样式表

截至2019年，使用构造样式表是将样式表应用于影子DOM和web组件的方法。在此处了解更多。

之前的答案：

您可以在Shadow DOM中定义的<style>元素的第一行使用import CSS规则：

<div id=D1></div>
<template id=T1>
   <style>
      @import url( '/css/stylesheet.css' )
   </style>
   ...
</template>

然后在 Shadow DOM 根元素中导入 <template> 的 content ：

var root = D1.attachShadow( {mode: open } )
root.appendChild( T1.content.cloneNode( true ) )