0

下面通过我准备并推送到github repo的一个简单示例来说明这个问题。

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

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

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

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

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

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

4

1 回答 1

1

似乎是样式垫片的可能限制。填充 CSS 很难！我建议使用这个演示在 Polymer repo 上提交一个问题。

于 2015-12-15T15:50:27.187 回答