javascript - Shadow DOM 元素可以继承 CSS 吗？

Question

我正在听 JavaScript Jabber 的这一集:

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

有一次，Rob 说:

And everyone has this first inclination, because it makes so much sense. You’re like, “Bootstrap is components. I’m just going to make them into tags.” But then you run into the fact that the Bootstrap style sheet is just one big long style sheet that was written assuming that it could touch every part of the document. And when you are suddenly scoping bits of the markup, scoping it so that the CSS can’t reach it, the CSS would actually have to be in the Shadow DOM with it and you would have to write that element from the ground up, that’s where people I think get really confused and really frustrated initially.

这让我想知道，您将如何使用 Web Components 解决这个问题？有没有办法让 Shadow DOM 模板继承通用样式，或者您是否必须为每个单独的组件重复共享 CSS？还是别的？

Answer 1

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

---

在完整的 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; }