Can I make a template style external?

Question

In Google Polymer lesson 1, they have an example that includes an inline stylesheet. I'd like to move it to a css file, but the style is inside a template tag. To make matters worse, it says it's

Used inside a shadow DOM tree, the :host pseudo-class matches the element that hosts the tree. In this case, it matches the element.

Q: Can I move this style to a css file?

Answer 1

If you want to style the elements that are part of a custom elements Shadow DOM you have to use the ::shadow selector, or /deep/ selector if you want to select elements regardless how many levels deep they sit inside of Shadow DOM.

So from the outside, you would style a p element that's inside x-foo's Shadow DOM like this:

x-foo::shadow p {

}

You can read about all that stuff here: http://www.polymer-project.org/articles/styling-elements.html

Answer 2

If you download the seed element from this page (or just look at the listed contents), you'll see that it uses an external css file. You can examine the element html to see how it is used, but it's very simple:

<polymer-element name="seed-element" attributes="notitle author">

  <template>

    <link rel="stylesheet" href="seed-element.css" />

    <h1>Hello from seed-element</h1>
    <content></content>

  </template>
  <script>

    Polymer('seed-element', {
      //...
    }
  </script>
</polymer-element>

Then in seed-element.css by default you have the following:

:host {
  display: block;
}

The way I understand it (in my limited knowledge) is that if you were to rename seed-element to my-element, this would be the same as doing

my-element {
  display: block;
}