元素之间的聚合物共享样式

问题描述：

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

I need to share styles across multiple Polymer elements. Is it acceptable to create a "styles.html" file and then import that into my different elements or would this start to have performance implications as the app grows? I know for 0.5 there was a core-styles but it kind of seems unnecessary if imports will work just as well.

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>

答

如讨论登录chrome以deprecate / deep /和:: shadow选择器：

As suggested in discussion on issue logged in chromium to deprecate /deep/ and ::shadow selectors:

说你的常见风格在一个名为

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'）;

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

这反转了控制：风格消费者不必广播你的风格为
任何人使用，风格消费者必须知道他们想要什么样式，
主动请求他们，这有助于避免冲突。使用浏览器
缓存，对这么多的导入本质上没有惩罚，事实上
可能比使用穿孔机通过多个shadow
树的级联样式更快。

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将它导入到您的组件中。
不会有多个网络调用，因为浏览器将在您的第一个组件加载时对其进行缓存，并且会从缓存中选择后续组件。

You can create a style.css and import it in your components by putting a css @import in your template. There won't be multiple network calls, since browser is going to cache it when your first component loads and for subsequent components it will picked from cache.

我们一直在使用webcomponents在我们的生产应用程序一段时间，现在使用这种技术，因为/ deep /已被弃用，没有任何意义的性能差异。

We have been using webcomponents in our production apps for a while now using this technique since /deep/ has been deprecated and there has not been any signification performance difference.

元素之间的聚合物共享样式

相关推荐