Javascript 阴影DOM元素可以继承CSS吗？

我在听JavaScript Jabber的这一集：

罗布曾说过：

每个人都有第一个倾向，因为这很有道理。你会说，“Bootstrap就是组件，我只是想把它们做成标签。”但是你会发现，Bootstrap样式表只是一个很大的长样式表，它是假设可以触及文档的每个部分而编写的。当你突然确定标记的范围，确定它的范围，使CSS无法到达它，CSS实际上必须与它一起处于阴影DOM中，你必须从头开始编写该元素，我认为人们一开始会感到困惑和沮丧

---

这让我想知道，如何使用Web组件解决这个问题？是否有一种方法可以让影子DOM模板继承公共样式，或者您必须为每个单独的组件重复共享CSS？还是别的什么？

这里有一个例子：

虽然当使用

#占位符

---

在Chrome devtools配置选项卡中打开“Show user agent shadow DOM”，然后检查

以了解我的意思注意：以下答案的实质内容不再相关，因为所讨论的功能已被弃用一段时间。不要使用示例代码，但请随意浏览一下互联网的过去

---

在一个完整的shadowdom实现中，CSS有一个

：：Shadow

伪类，还有

/deep/

组合器

：：shadow

伪类允许您在元素下进入shadowdom，并且它与shadowroot匹配。

/deep/

组合器有效地完全打开了阴影DOM

因此，如果您有一个

元素，其中包含

元素，则可以使用

x-foo::shadow span { color: red; }

或者将任何阴影中的所有

设置为红色：

body /deep/ span { color: red; }

---

看看这个鲜为人知的方法：

可以在html导入文件中定义样式：

<core-style id="x-test">
  :host {
    backgound-color: steelblue;
  }
</core-style>

：主持人{
背景颜色：钢蓝色；
}

然后您可以在多个元素中使用它们：

<polymer-element name="x-test" noscript>
  <template>
    <core-style ref="x-test"></core-style>
    <content></content>
  </template>
</polymer-element>

在中，您可以阅读有关如何使用该技术的更多信息

---

然而，我能想到的一个缺点是无法将SASS与此技术结合使用，因为样式是在

标记中定义的，而不是在

元素中定义的，并且没有明确的方法导入外部样式表。

我想我理解您的问题。可以在每个自定义元素中使用“链接”来包含主样式，也可以扩展包含它的现有元素。例如（使用聚合物）：

---

我认为值得一读：

无论过去需要什么样的破解，影子dom/CSS的当前状态是您可以链接到外部样式表。更多信息请访问MDN：

---

然后，您可以拥有某种实用程序样式表（Tailwind或类似的样式表），所有组件都引用它，这样您就不会复制CSS。理论上，CSS文件将被下载一次并缓存，然后自定义元素将能够使用其中的类（只要它们都链接到它）。

这个问题并不“太广泛”-它有一个非常简洁的答案（无论如何，在真正的Shadow DOM实现中）。我发布了不同的方法来解决这个问题，请参见最后一个答案。阴影DOM创建新的DOM树。因此它提供了封装。您可以访问：host和/或：host-context（）和：：shadow，这样您就可以有一个可以访问shadow DOM元素的全局主题的概念，就像您可以在今天的应用程序中访问它一样。此外，web组件规范的其他部分（如模板和html导入）将提供更干净、更可共享的组件。还有更好的吗？@anders？？什么会更好？？它怎么会比CSS的其他部分不那么优雅呢？

/deep/

，

：：shadow

和

>

都不受欢迎，最终会被删除。@GünterZöchbauer，这很有趣；作用域模块的名称仍然包括

：：shadow

和

>>

，尽管它们被标记为“问题”。很有趣。Chrome问题中的讨论不是关于是否删除，而是在删除之前保留多久。聚合物团队也正在远离在任何地方使用它们。我想这已经解决了。

<polymer-element name="ui-button" noscript>
  <template>
    <link rel="stylesheet" href="main.css"/>
    <div class="class-from-main" style="">
      <content></content>
    </div>
  </template>
</polymer-element>