css - 将样式应用于浏览器自己的元素，应用于原生 ShadowDOM？

Question

在 Rob Dodson 关于 Web Components 的演讲之后，他提到了全新的“cat”^^ 和“hat”^ CSS 选择器，我问过关于将样式不仅应用于自定义元素的 ShadowDOM，还应用于浏览器的 native 元素的 ShadowDOM 的可能性？

是否可以为 ShadowDOM 中的元素设置样式？在哪些浏览器中以及如何？我找到的唯一相关文章是 Dimitry Glazkov 在“What the Heck is Shadow DOM?”上发表的文章'，在那里他通过使用伪选择器和 -webkit-appearance: none; 规则来深入 ShadowDOM 子树。

Answer 1

由于CSS Scoping Module Level 1的草案状态由于能够随时更改，我原来的方法并没有奏效很长时间。

在 Chrome v33+ 中，您必须在 chrome://flags 中打开 Enable Experimental Web Platform Features 才能使用以下代码工作。

---

从 Chrome Canary v33 及其猫选择器 ^^ 开始，答案是:是!
2014-03-30 更新: Chrome Canary v35+ 支持最新版本的选择器，即所谓的 /deep/ selector。 .

它在所有边界上设置样式，也适用于原生元素。

参见:http://codepen.io/Volker_E/pen/jsHFC

/* ... Example for applying to all h2 elements, no matter if DOM or any ShadowDOM subtree ... */
:root ^^ h2 {
    font-family: "Arial Black", sans-serif;
}

/* Cr 33+: The "cat" also works on native elements' ShadowDOM */
video ^^ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}

/* Cr 35+: /deep/ also works on native elements' ShadowDOM */
video /deep/ input[type="button"]:first-child {
    opacity: .75;
    -webkit-filter: drop-shadow( .2rem .2rem .2rem hsla( 5, 100%, 50%, 1 ) );
}