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

Question

下面用我准备并推送到 a github repo 的一个小例子说明了这个问题。

我创建了一个自定义元素 "x-menu"（在 /x-menu.html 中），其中包含灯光 DOM 的样式规则。实际上，我这样做的用例是使用 CSS 变量和混合来定义要在文档和自定义元素中使用的颜色、字体堆栈等。

我有一个定义文档样式的自定义元素（在 /demo/index.html 中），如 Polymer 1.0 开发指南 relevant part 中所述，它为我的文档定义了一些排版规则页数。

这与 Chrome 中的原生 Shadow DOM 配合使用效果很好。

但是，当使用 Shady DOM 时，文档样式解析为比 x-menu 元素中的样式具有更高特异性的样式定义。现在它出现在 Chrome 的开发人员工具的样式堆栈中：

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 encapsulation is limited."），

我能想到两种解决方法，但都不是很实用：

给每个灯DOM节点添加一个CSSclass（你可以在演示页面看到）
- 这是不切实际的，因为自定义元素的用户必须记住这一点并破坏了 CSS 封装目标。
将 CSS mixin 应用于本地样式定义。当由 Shady DOM 处理时，CSS 在文档级别比 "custom-style" 具有更高的特异性。
- 这变得更加麻烦，并在开发、维护和处理 CSS 时增加了不必要的开销。

我正在寻找任何关于此问题的合适解决方法的想法。最坏的情况，我想把责任推给元素开发者而不是元素的用户。

Answer 1

似乎是样式 shim 的一个可能限制。 Polyfilling CSS 很难！我建议使用此演示在 Polymer 存储库上提交问题。

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

Document styling affecting local DOM when using Polymer 1.0 Shady DOM

css

web-component

polymer-1.0

shady-dom