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

【问题标题】：How to apply common CSS styles to many Shadow Roots at once?如何一次将常见的 CSS 样式应用于多个 Shadow Roots？
【发布时间】：2016-12-05 11:41:31
【问题描述】：

考虑一下，我很少有元素使用 Shadow DOM 来隐藏其内部 div-soup 和布局。

尽管它们是不同的，但它们共享相同的 CSS 样式表，因为它们使用相同的一组元素，这些元素应该以一致的方式设置样式。例如，这可能是一个 CSS 框架（引导程序）。

问题是这个样式表太大了。

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

【问题讨论】：

【解决方案1】：

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

截至 2019 年，可构造样式表是一种将样式表应用到影子 DOM 和一般 Web 组件的方法。阅读更多about it here。

上一个答案：

您可以在 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 ) )

【讨论】：

谢谢！我已经用你的解决方案创建了 jsbin jsbin.com/veruki/edit?html,output
当我们在包含全局样式的<head> 中有一个<style> 元素时会怎样。不可能@import 它，因为它不在任何地方，它只是一个文字元素。在这种情况下你会怎么做？
@trusktr 我想我会克隆样式元素以将其注入模板或直接注入 Shadow DOM。
我一直想要一个优雅的解决方案来解决这个概念since 2005。这是迄今为止我找到的最佳答案。
@LonnieBest 现在你也可以在 Shadow DOM 中使用。