Javascript 聚合物跨元素共享样式

我需要跨多个聚合物元素共享样式。创建一个“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>

{{text}}
聚合物({
是‘我的按钮’，
行为：[按钮行为]
})

根据问题登录chromium中的建议，拒绝使用/deep/和：：shadow选择器：

假设您的常用样式位于名为

common-style.css

在组件中，有一个样式标记，如下所示

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

这将反转控件：而不是为 任何要使用样式的用户都必须知道他们想要哪种样式，并且 主动请求，这有助于避免冲突。带浏览器 缓存，对这么多的导入基本上没有惩罚，事实上 可能比通过多个阴影层叠样式更快 使用穿孔器的树木

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

---

我们在生产应用程序中使用网络组件已有一段时间了，现在使用这种技术，因为/deep/已被弃用，并且没有任何明显的性能差异。

您可以使用Polymer的共享样式。使用您的样式创建文档：

<dom-module id="shared-styles">
  <template>
    <style>
      /* Your styles */
    </style>
  </template>
</dom-module>

/*你的风格*/

---

然后将其导入元素，并在其定义中将

include=“shared styles”

添加到

标记。

从Polymer 1.1开始，Polymer项目作者建议创建并导入样式模块以解决此问题

要在元素之间共享样式声明，可以在元素内打包一组样式声明。在本节中，为方便起见，保留样式称为样式模块

样式模块声明一组命名的样式规则，这些规则可以导入到元素定义或自定义样式元素中

---

请参阅更多信息：

与其他自定义元素一样，通过为样式创建

dom模块来共享样式。要在自定义元素中包含共享样式，请使用
。下面是完整的示例

共享样式.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
  <template>
    <style>
      /* CSS goes here */
    </style>
  </template>
</dom-module>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
  <template>
    <style include="shared-styles">
      /* Element specific styles go here */
    </style>
    <!-- HTML goes here -->
  </template>
  <script>
    Polymer({
      is: 'some-element',
      properties: {
      }
    });
  </script>
</dom-module>


/*CSS在这里*/

some element.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="shared-styles">
  <template>
    <style>
      /* CSS goes here */
    </style>
  </template>
</dom-module>

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="some-element">
  <template>
    <style include="shared-styles">
      /* Element specific styles go here */
    </style>
    <!-- HTML goes here -->
  </template>
  <script>
    Polymer({
      is: 'some-element',
      properties: {
      }
    });
  </script>
</dom-module>


/*特定于元素的样式位于此处*/
聚合物({
是‘某个元素’，
特性：{
}
});
您有没有看一下这张照片？您可以沿着DOM树传播常用样式。这似乎是一种“干净”的使用方式，因为它会自动传播。您没有绑定到文件（具有特定名称），如果有人忘记导入样式文件或只想使用默认方案，样式将自动应用。我确实查看了默认指南。我想我的总体问题是，用导入的方法导入它们是否会影响性能，或者只是一种风格偏好。