首页 文章

使用Polymer 1.0 Shady DOM时，文档样式会影响本地DOM

提问于
浏览 次
0

以下说明了这个问题，我准备了一个简单的例子并推送到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封装是有限的 . ”），

我能想到两种解决方法，其中两种都不太实用：

  • 为每个轻型DOM节点添加一个CSS类（您可以在演示页面中看到）

  • 这是不切实际的，因为自定义元素的用户必须记住这一点并且失败了CSS封装目标 .

  • 将CSS mixin应用于本地样式定义 . 当由Shady DOM处理时，CSS在文档级别具有比"custom-style"更高的特异性 .

  • 这变得更加麻烦，并且在开发，维护和处理CSS时增加了不必要的开销 .

我正在寻找针对此问题的合适解决方法的任何想法 . 最糟糕的是，我想把责任放在元素开发人员而不是元素的用户身上 .

css css3 polymer-1.0 web-component shady-dom

1 回答

  • 1

    看起来像样式垫片的可能限制 . Polyfilling CSS很难！我建议使用此演示在Polymer repo上提交一个问题 .

    回复于

相关问题