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>

Did you have a look at the [Styling guide](https://www.polymer-project.org/1.0/docs/devguide/styling.html)? You could propagate common styles down the DOM tree. This seems like a 'clean' way to use as it propagates automatically. You are not bound to a file (with a specific name) and styles are applied automatically if someone forgets to import the style file or just wants to use the default scheme. — Alexander Weber, Jun 15 '15 at 12:16
I did look at the default guide. I guess my question overall is just if the method of importing them with imports would have performance implication or if it is just a style preference. — Danny Blue, Jun 15 '15 at 15:29
http://stackoverflow.com/questions/32298500/polymer-import-theme-file-with-host-in-styles-has-no-affect — Justin XL, Oct 05 '15 at 12:02

score 7 · Answer 1 · answered Oct 05 '15 at 04:04

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.

score 2 · Answer 2 · answered Jun 15 '16 at 13:31

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.

score 2 · Answer 3 · answered Apr 05 '17 at 10:04

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>

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

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

Polymer share styles across elements

4 Answers4

Linked