javascript - Polymer 跨元素共享样式

Question

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

样式.html

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

我的按钮.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

如 discussion 中的建议关于登录 chromium 以弃用/deep/和::shadow 选择器的问题:

say your common styles are in a file called

common-style.css

In your component have a style tag that is like this

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

This inverts the control : instead of broadcasting your styles for anyone to use, style consumers must know which styles they want and actively request them, which helps avoid conflicts. With browser caching, there's essentially no penalty to so many imports, in fact it is likely faster than cascading the styles through multiple shadow trees using piercers.

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

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