如何将常见的CSS样式同时应用于多个Shadow Roots？

Question

考虑一下,我使用Shadow DOM隐藏其内部div-soup和布局的元素很少.

即使是艰难的,它们也是不同的,它们共享相同的CSS样式表,因为它们使用的是相同的元素集,这些元素应该以一致的方式进行样式化.例如,这可以是CSS框架(引导程序).

问题是这个样式表非常大.

在许多Shadow Roots(在SD V1中)之间分享如此大样式表的最有效方法是什么？

Answer 1

更新:2019年 - 使用可构造的样式表

从2019年开始,Constructable样式表是将样式表应用于影子DOM和Web组件的方法.在这里阅读更多相关信息.

上一个答案:

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

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

然后导入<template> contentShadow DOM根目录:

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