跨元素的聚合物共享样式

Question

我需要在多个Polymer元素之间共享样式。创建“ styles.html”文件然后将其导入到我的其他元素中是否可以接受，还是随着应用程序的增长而开始对性能产生影响？我知道有0.5种核心样式，但是如果导入也能正常工作的话，这似乎是不必要的。

styles.html

<style>
  button {
    background: red;
  }
</style>

my-button.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/main-styles.html">
<link rel="import" href="../behaviors/mixins.html">

<dom-module id="my-button">
  <template>
    <button>{{text}}</button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-button',
    behaviors: [ButtonBehavior]
  })
</script>

Answer 1

如有关问题的讨论中所建议的那样，登录铬以弃用/ deep /和:: shadow选择器：

说您的常用样式在一个名为

common-style.css

在您的组件中有一个像这样的样式标签

@import url（'/common-style.css'）;

这就颠倒了控制：样式消费者必须向他们传达自己想要的样式并主动请求它们，而不是向任何人广播您的样式，而必须让他们知道。使用浏览器缓存时，对这么多的导入基本上没有损失，实际上，这可能比使用穿孔器通过多个阴影树级联样式更快。

您可以创建style.css并将其导入到组件中，方法是将css @import放入模板中。不会有多个网络调用，因为在第一个组件加载时浏览器将缓存它，而对于后续的组件，它将从缓存中选择。

由于不推荐使用/ deep /，并且在性能上没有任何区别，因此我们已经在生产应用程序中使用Webcomponents已有一段时间了。