如果我的 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 中的父选择器，我认为目前这是不可能的。
您可以在 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 后代的节点，因此上面的代码片段将被重写为 polymer-foo >polymer-foo h1。
令人失望的是，这在今天是不可能的，但 Shadow DOM 样式仍处于起步阶段，希望我们将来能够更具表现力。
为了便于将来引用，可以在此处找到有关 Shadow DOM 样式的正在进行的规范:http://dev.w3.org/csswg/shadow-styling
关于css - 影子 DOM : how to apply CSS style only if the host element is <body>?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21834025/