跨Web组件共享CSS样式

Question

我正在使用mozilla - X-tabs我的应用程序中的Web组件来标记它。现在，我需要在我的应用中使用bootstrap - glyphicons。但是由于webcomponents使用shadow-DOM，引导程序css样式不会应用于Web组件中吗？

有没有办法绕过它，共享所有Web组件的css文件/样式？

Answer 1

您可能希望阅读W3C的CSS Scoping Model。

每个polyfill库（我确定，例如，Mozilla的）会为/deep/，::content等选择器提供处理程序。

希望它有所帮助。

Answer 2

我们遇到类似的场景，字体很棒。我们有一堆在Web组件中很常见的类。我们直接从主机加载它们，并使用/ deep / combinator将这些类提供给组件（很快将替换为＆gt;＆gt;＆gt;语法）

X-tags使用的polyfill（Webcomponents.js - 来自Polymer）支持/ deep /和:: shadow（单级）。您可以使用这些选择器从外部定位阴影DOM。

Answer 3

Polymer为此提供了一个元素core-style，请参阅blog post。

这个{{3}}介绍了如何设置它，你使用相同的标签来声明常用样式并导入它们。

<core-style id="button">
  button {
    display: inline-block;
    background: #bada55;
  }
</core-style>

id的存在使得该元素成为常见样式的生成者。

然后导入组件阴影dom中的常用样式：

<core-style ref="button"></core-style>

ref属性使其成为样式消费者。

所以AFIK使用普通网络组件以标准方式无法实现，但聚合物中的core-style扩展名，或::shadow和/deep/的Polymer支持选择。