css - 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 block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.

So far, I have tried in, and outside of the <template> definition:

<link rel="stylesheet" href="./account-list.css"> with an @import
<style>@import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css

But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.

Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.

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.

<!-- shared-styles.html -->
<dom-module id="shared-styles">
  <template>
    <style>
      .red { color: red; }
    </style> 
  </template>
</dom-module>

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

<link rel="import" href="shared-styles.html">

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 -

   <style is="custom-style" include="shared-styles"></style>

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

   <dom-module id="my-element"> <style include="shared-styles"></style>

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.