2

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

/* 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)。

4

1 回答 1

2

我认为如果没有 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

于 2014-02-18T18:52:40.287 回答