Styles in Polymer

Flow
1

Page [4. Scoping Styles in a Theme Module]
(https://github.com/vaadin/vaadin-themable-mixin/wiki/4.-Scoping-Styles-in-a-Theme-Module) contains info about placing dom-module with styles into index.html or a separate HTML import. However, HTML imports are deprecated and I do not want to place this directly into index.html. How can I use custom styling like the following one in Polymer?

<dom-module id="custom-progress-bar-theme" theme-for="vaadin-progress-bar">
    <template>
        <style>
            [part="value"]
 {
                background-color: green;
            }
        </style>
    </template>
</dom-module>

Placing it in my Polymer Element before not works, nothing is styled.

2

HTML imports are the way for now; just create a separate HTML file with tags and put the snippet inside.

But placing the style in your element HTML should work too. Maybe the CSS itself isn’t specific enough?

3

Thanks for your reply. So, you mean to do it like this:

  1. create something.html
  2. place <dom-module id="custom-progress-bar-theme" theme-for="vaadin-progress-bar"></dom-module> inside.
  3. add <link rel="import" href="something.html"> to index.html.

Ok?