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

Question

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

我使用轻型 DOM 的样式规则创建了一个自定义元素“x-menu”(在/x-menu.html 中)。实际上，我这样做的用例是使用 CSS 变量和混合来定义要在文档和自定义元素中使用的颜色、字体堆栈等。

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

这适用于 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 封装是有限的。”)，

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

1. 为每个轻型 DOM 节点添加一个 CSS 类(您可以在演示页面中看到)
   • 这是不切实际的，因为自定义元素的用户必须记住这一点，这违背了 CSS 封装目标。
2. 将 CSS 混合应用到本地样式定义。当被 Shady DOM 处理时，CSS 在文档级别比“custom-style”具有更高的特异性。
   • 这变得更加繁琐，并在开发、维护和处理 CSS 时增加了不必要的开销。

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

Answer 1

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