Question

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

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

Answer 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无效。：祖先（正文）被转换为任何作为正文后代的节点，因此上述代码段将被重写为polymer-foo > polymer-foo h1。

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

为了将来参考，可以在此处找到有关Shadow DOM样式的正在进行的工作规范：http://dev.w3.org/csswg/shadow-styling

Shadow DOM：如果主机元素是什么，如何应用CSS样式？

1 个答案: