Polymer @import theme file with :host in styles has no affect

Question

Back with another Polymer question, I have a Polymer/Electron app that I\'m trying to style.

I want to create a theme.css that contains a :host

Answer 1

There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).

Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.

Then obviously you need to import this file in your page.

Now, there are two scenarios.

1. If you are using custom-style at the document level, you need to include the style module you previously defined like this -

2. If you simply want to include the style module inside one of your elements, do this -

Have a look at this plunker that demonstrates both scenarios.

Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.