下面以一个简单的例子来说明这个问题,我准备并推送到a github repo。
我创建了一个自定义元素“x-menu”(在/x-menu.html中),其中包含light DOM的样式规则。在实践中,我这样做的用例是使用CSS变量和mixins来定义要在文档和自定义元素中使用的颜色,字体堆栈等。
我有一个自定义元素定义文档样式(在/demo/index.html中),如Polymer 1.0开发指南的relevant part中所述,它定义了我的页面的一些排版规则。
这适用于Chrome中的原生Shadow DOM。
但是,当使用Shady DOM时,文档样式将解析为样式定义,其具有比x-menu元素中的样式更高的特异性。现在,它出现在Chrome的开发人员工具的Styles堆栈中:
ul:not([style-scope]):not(.style-scope), p:not([style-scope]):not(.style-scope) {
font-size: 12px;
color: red;
}
.container.x-menu ul, .container.x-menu p {
font-size: 30px;
color: green;
}
我知道Shady DOM和Shadow DOM polyfill有一些限制(webcomponents.org只是说已知的限制是“CSS封装是有限的。”),
我能想到两种解决方法,其中两种都不太实用:
我正在寻找针对此问题的合适解决方法的任何想法。最糟糕的是,我想把责任放在元素开发人员而不是元素的用户身上。
看起来像样式垫片的可能限制。 Polyfilling CSS很难!我建议使用此演示在Polymer repo上提交一个问题。