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

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

通用样式.css

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

@import url( '/common-style.css' );

这颠倒了控制：与其将您的样式广播给任何人使用，样式消费者必须知道他们想要哪种样式并主动请求它们，这有助于避免冲突。使用浏览器缓存，如此多的导入基本上没有任何损失，实际上它可能比使用穿孔器通过多个阴影树级联样式更快。

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

我们已经在我们的生产应用程序中使用 webcomponents 一段时间了，因为 /deep/ 已被弃用，并且没有任何显着的性能差异。

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

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

然后将其导入到您的元素中，并在它们的定义中添加include="shared-styles"到<style>标签中。

通过dom-module为它们创建一个来共享样式，就像其他自定义元素一样。要在自定义元素中包含共享样式，请使用<style include="style-module-name">. 完整示例如下。

共享样式.html

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

一些元素.html

<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>

从 Polymer 1.1 开始，聚合物项目作者建议创建和导入样式module来解决此问题。

要在元素之间共享样式声明，您可以将一组样式声明打包在一个元素中。在本节中，为了方便起见，一个持有样式被称为一个样式module。

样式module声明了一组命名的样式规则，可以将其导入元素定义或自定义样式元素。

查看更多：https : //www.polymer-project.org/1.0/docs/devguide/styling#style-modules