Polymer: Global/document level styling module

Question

How do I declare a global or document level styling module for Polymer? Polymer's App Toolbox starter-kit places document styles inline in the index.html file:

<style>
  body {
    margin: 0;
    font-family: 'Roboto', 'Noto', sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    background-color: #eeeeee;
  }
</style>

However, I'd like to separate this into a module.

The starter-kit template also contains a shared-styles.html module that can be imported into each module to take effect, but this approach means repeating in import directive in every module.

Answer 1

>= 1.7

See: https://www.polymer-project.org/1.0/blog/2016-10-03-1.7-release (thanks Tony19)

To contextualise, the following module contains document level styling:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<style is="custom-style">

    /* Declare document level styling, variables and mixins here */
    html {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;

        --example-css-var: 1rem;

        --example-css-mixin: {
            width: 100%;
        };
    }

</style>

This module would then be included within the head tags of the required page/app entry point. Ie:

<link rel="import" href="/src/styles/document-styles.html">

Note that global styling (ie styles that 'pierce' web components through their API) needs to be in the form of a CSS variable or mixin, and would be placed within html .

< 1.7

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

To contextualise, the following module contains document level styling:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<style is="custom-style">

    /* Declare document level styling */
    body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;
    }

    /* Declare document level variables and mixins here */
    :root {
        --example-css-var: 1rem;

        --example-css-mixin: {
            width: 100%;
        };
    }

</style>

This module would then be included within the head tags of the required page/app entry point. Ie:

<link rel="import" href="/src/styles/document-styles.html">

Note that global styling (ie styles that 'pierce' web components through their API) needs to be in the form of a CSS variable or mixin, and would be placed within :root .