全局样式不适用于 Chrome 36 中 Polymer 元素中的 Shadow DOM 子项答案

【问题标题】：Global styles not applied to Shadow DOM children in Polymer elements in Chrome 36全局样式不适用于 Chrome 36 中 Polymer 元素中的 Shadow DOM 子项
【发布时间】：2014-06-07 12:14:28
【问题描述】：

在 Chrome 34 中，在标头中使用 <style> 标签定义的样式将影响 Polymer 元素的 Shadow DOM 中的元素。在 Chrome 36 中，情况并非如此。

我可以将我们所有的样式直接移动到元素的模板中，但有时我们的 css 选择器弥补了 Shadow DOM 的差距。例如：

.something-outside .something-inside { ... }
.something-outside.foo .something-inside { ... }

后一种情况比较困难，因为它需要关于两个作用域的信息。

处理这个问题的正确方法是什么？ Polymer 是否有一个功能可以让全局样式通过？

有趣的是，如果没有 10 个 stackoverflow 信誉点（哇），我不能添加任何图像或超过 2 个链接，所以我能提供的最好的就是这个 jsbin：

http://jsbin.com/vobowigi/1/edit

【问题讨论】：

标签： javascript css polymer

【解决方案1】：

您看到的是 polyfill 和原生 Shadow DOM 之间的区别。之前应用的选择器不再以 SD 中的元素为目标。

要对 SD 外部的元素进行样式设置，可以使用 /deep/ 组合器和 ::shadow 伪元素。例如，将所有h1s 设置为红色，无论它们出现在什么树上：

body /deep / h1 {
  color: red;
}

这两篇文章包含 SD 样式的所有细节：

【讨论】：

优秀。将尽快尝试。错误提交：github.com/mozilla-appmaker/appmaker/issues/1112

【解决方案2】：

如果像我一样，您正在寻找一种方法来集中设置整个网站的通用元素的样式，而不仅仅是进入一个影子 DOM，那么我想出的一个策略是将全局样式表用作一个单独的文件并将其包含在所有自定义元素的模板。这样您就不会重复样式或繁琐地引用嵌套级别的元素，但您仍然可以利用样式范围。

【讨论】：

【解决方案3】：

我的回答可能有点晚，但我遇到了类似的问题。但是这个问题只有在我从 shady DOM 更改为 shadow DOM 之后才出现。如果你使用 shadow DOM，那么你需要包含这里描述的样式：

https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

例如你会这样做：

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style>
  </template>
</dom-module>

然后将其包含在您的元素中，如下所示：

<style include="shared-styles">
  :host { display: block; }
</style>

我希望这对某人有所帮助。

【讨论】：