Polymer share styles across elements

Question

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>

Answer 1

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

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.

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.

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.