Shadow DOM元素可以继承CSS吗？

Question

我正在听这集JavaScript Jabber:

http://javascriptjabber.com/120-jsj-google-polymer-with-rob-dodson-and-eric-bidelman/

Rob曾说过:

每个人都有这种第一倾向,因为它非常有意义.你想,"Bootstrap是组件.我只是将它们变成标签."但是你会遇到这样一个事实,即Bootstrap样式表只是一个很长的样式表,假设它可以触及文档的每个部分.当你突然查看标记的一些内容,确定它以便CSS无法到达它时,CSS实际上必须在它的Shadow DOM中,你必须从头开始编写该元素,这是在那里,我认为人们最初会感到非常困惑和沮丧.

这让我很奇怪,您如何使用Web Components解决这个问题？Shadow DOM模板是否有一种方法可以继承常见样式,或者您是否必须为每个单独的组件重复共享CSS？或者是其他东西？

Answer 1

注意:以下答案的内容不再相关,因为所讨论的功能已被弃用了一段时间.不要使用示例代码,但可以随时查看Internet过去.

在一个完整的Shadow DOM实现中,CSS有一个::shadow伪类,还有一个/deep/组合器.

该::shadow伪类可以让你的元素下闯入影子DOM,它的影子根相匹配.该/deep/组合子有效地完全打开了阴影DOM.

因此,如果你有一个<x-foo>元素在<span>里面,你可以用它们做红色

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

或者将所有<spans>阴影DOM 全部变为红色:

body /deep/ span { color: red; }

Answer 2

Shadow DOM / CSS 的当前状态是您可以链接到外部样式表。更多信息请参见 MDN：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Internal_versus_external_styles

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