Shadow DOM：仅当宿主元素为 <body> 时如何应用 CSS 样式？答案

【问题标题】：Shadow DOM: how to apply CSS style only if the host element is <body>?Shadow DOM：仅当宿主元素为 <body> 时如何应用 CSS 样式？
【发布时间】：2014-02-17 16:15:39
【问题描述】：

如果我的 Web 组件是 <body> 元素的直接子元素，我必须对它应用特殊的 CSS 样式。到目前为止，这是我尝试过的：

/* applies even if the component isn't a direct child */
:host(body) {
    color: red;
}

/* never applies */
:host(body:host) {
    color: red;
}

/* never applies */    
:host(body:host > my-component) {
    color: red;
}

/* never applies */    
:host(body > my-component:host) {
    color: red;
}

浏览器：Chrome 稳定版 (32.0.1700.107)、Chrome Canary (34.0.1843.3)。

【问题讨论】：

你不能只使用简单的传统CSS，比如body > .my-component吗？
@matewka，我不能。 Web Components 的全部意义在于通过 HTML 和 CSS 封装的可重用性。组件本身引用了 CSS 文件，因此应该从 Shadow DOM 内部以适用的方式构建 CSS 规则。基本上我在玩这样的东西：html5rocks.com/en/tutorials/webcomponents/shadowdom-201/…
对不起，我不知道。那我帮不了你了。

标签： css google-chrome css-selectors web-component shadow-dom

【解决方案1】：

我认为如果没有 CSS 中的父选择器，目前这是不可能的。

你可以在 Chrome 32 中做这样的事情：

/* @polyfill body > :host h1 */

这在 Chrome 32 中有效，因为 @polyfill 指令添加了一个文档级样式，即：body > polymer-foo h1。但是，这在 Chrome 34 中不起作用，因为 Shadow DOM 忽略了文档级样式。

另外，:host 现在只会匹配宿主元素本身。如果你想尝试匹配祖先，你可以使用:ancestor()。不幸的是:ancestor(body) > :host h1 不起作用。 :ancestor(body) 被翻译到任何作为 body 后代的节点，因此上面的 sn-p 将被重写为 polymer-foo > polymer-foo h1。

令人失望的是，这在今天是不可能的，但 Shadow DOM 样式仍处于起步阶段，希望我们将来能够更具表现力。

为了将来参考，Shadow DOM 样式的工作规范可以在这里找到：http://dev.w3.org/csswg/shadow-styling

【讨论】：

谢谢，罗伯。这对于 Shadow DOM 的当前状态来说很好，不幸的是，它是目前使用 Dart 开发 Web 应用程序的唯一方法，我的意思是 AngularDart 将 Shadow DOM 用于 NgComponents。