Posso tornar um estilo de modelo externo?

Question

Em Lição 1 do Google Polymer, eles têm um exemplo que inclui uma folha de estilo embutida.Gostaria de movê-lo para um arquivo css, mas o estilo está dentro de uma tag de modelo.Para piorar a situação, diz que é

Usado dentro de uma árvore de sombra Dom, o: Host Pseudo-classe corresponde ao elemento que hospeda a árvore.Nesse caso, corresponde ao elemento.

P:Posso mover esse estilo para um arquivo css?

Answer 1

Se você deseja estilizar os elementos que fazem parte de um Shadow DOM de elementos personalizados, você deve usar o ::shadow seletor ou /deep/ seletor se você deseja selecionar elementos, independentemente de quantos níveis de profundidade eles estão dentro do Shadow DOM.

Então, do lado de fora, você estilizaria um p elemento que está dentro x-foodo Shadow DOM assim:

x-foo::shadow p {

}

Você pode ler sobre tudo isso aqui: http://www.polymer-project.org/articles/styling-elements.html

Answer 2

Se você baixar o elemento semente de esta página (ou apenas observe o conteúdo listado), você verá que ele usa um arquivo css externo.Você pode examinar o elemento html para ver como ele é usado, mas é muito simples:

<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>

Então, em seed-element.css, por padrão, você tem o seguinte:

:host {
  display: block;
}

Pelo que entendi (no meu conhecimento limitado) é que se você renomeasse o elemento semente para meu elemento, isso seria o mesmo que fazer

my-element {
  display: block;
}