首页 文章

全局样式未应用于Chrome 36中Polymer元素中的Shadow DOM子项

提问于
浏览 次
3

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

我可以将所有样式直接移动到元素的模板中，但有时我们的css选择器会桥接Shadow DOM间隙 . 例如 . ：

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

后一种情况更加困难，因为它需要有关两个范围的信息 .

处理这个问题的正确方法是什么？聚合物的特性是否会让全球风格通过？

非常有趣的是，我无法添加任何图像或超过2个链接而没有10个stackoverflow信誉点（whee），所以我能提供的最好的是这个jsbin：

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

javascript css polymer

3 回答

  • 1

    你看到的是polyfill和native Shadow DOM之间的区别 . 之前应用的选择器不再是SD中的目标元素 .

    要从SD外部调整元素的样式，有 /deep/ 组合子和 ::shadow 伪元素 . 例如，要将所有 h1 的样式设置为红色，无论它们出现在使用的是什么树：

    body /deep / h1 {
  color: red;
}

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

    回复于
  • 6

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

    回复于
  • 1

    我的回答可能有点晚了，但我遇到了类似的问题 . 但是这个问题只是在我从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>

    我希望这可以帮助别人 .

    回复于

相关问题