在 Rob Dodson 关于 Web Components 的演讲之后,他提到了全新的“cat”^^
和“hat”^
CSS 选择器,我问过关于将样式不仅应用于自定义元素的 ShadowDOM,还应用于浏览器的 native 元素的 ShadowDOM 的可能性?
是否可以为 ShadowDOM 中的元素设置样式?在哪些浏览器中以及如何?
我找到的唯一相关文章是 Dimitry Glazkov 在“What the Heck is Shadow DOM?”上发表的文章',在那里他通过使用伪选择器和 -webkit-appearance: none;
规则来深入 ShadowDOM 子树。
最佳答案
由于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 ) );
}
关于css - 将样式应用于浏览器自己的元素,应用于原生 ShadowDOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20043966/