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 of Polymer 1.1, the polymer project authors recommend creating and importing a style module to address this issue.

To share style declarations between elements, you can package a set of style declarations inside a element. In this section, a holding styles is called a style module for convenience.

A style module declares a named set of style rules that can be imported into an element definition, or into a custom-style element.

See more: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

Answer 2

You can use Polymer's shared styles. Create a document with your styles:

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

And then import this to your elements and in their definitions add include="shared-styles" to the <style> tag.

Answer 3

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.

Answer 4

Share styles by creating a dom-module for them, just like other custom elements. To include the shared styles in a custom element, use <style include="style-module-name">. Full example below.

shared-styles.html

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

some-element.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>