来自外部的阴影DOM风格

2018-07-02 22:39:13

我正在寻找一种从外部设计阴影DOM的方式。例如，我想将所有'span.special'元素中的所有文本的颜色设置为RED。包含来自影子DOM的'span.special'元素。我如何做到这一点？

此前有::阴影伪元素和/深/ combinator aka >>>为此目的。所以我可以写一些类似的东西

span.special, *::shadow span.special {
    color: red
}

但现在:: shadow ， / deep /和>>>已被弃用。那么，我们有什么替代它们呢？

你可以使用@import css来解释这个问题的另一个问题。

将规则包含在阴影树中的样式元素中。

 <style>
   @import url( '/css/external-styles.css' )
 </style>

请注意， >>>组合器仍然是CSS作用域模块草案的一部分。

那么，如果您正在使用库无法更改的图书馆Web组件，那么@import不是一个解决方案...

最后我找到了几种方法来做到这一点：

1）级联。 Shadow DOM的主机元素样式也会影响Shadow DOM元素。如果您需要为Shadow DOM的特定元素创建样式，而不是每个选项都不是选项。

2）定制属性https://www.polymer-project.org/1.0/docs/devguide/styling如果Web组件的作者提供了这样的。

3）在聚合物，有自定义Mixins也https://www.polymer-project.org/1.0/docs/devguide/styling

4）@import，但仅限于非库组件

所以，有几种可能性，但都是有限的。没有足够强大的方式可以将外部造型视为::阴影。

链接地址: http://www.djcxy.com/p/91807.html