¿Puedo hacer un estilo de plantilla externo?

Question

en Lección de Google Polymer 1 , tienenUn ejemplo que incluye una hoja de estilos en línea. Me gustaría moverlo a un archivo CSS, pero el estilo está dentro de una etiqueta de plantilla. Para empeorar las cosas, dice que es

Usado dentro de un árbol de sombras DOM, el: el host pseudo-clase coincide con el Elemento que aloja el árbol.En este caso, coincide con el elemento.

Q: ¿Puedo mover este estilo a un archivo CSS?

Answer 1

Si desea que establezca los elementos que forman parte de un elemento personalizado Shadow DOM tiene que usar el selector de ::shadow, o el selector de /deep/ si desea seleccionar elementos, independientemente de cuántos niveles se sienten dentro de la sombra DOM.

Así que desde afuera, usted diseñaría un elemento p que está dentro de la sombra Dom de x-foo como esta:

x-foo::shadow p {

}

Puede leer sobre todas las cosas aquí: http://www.polymer-project.org/articles/styling-elements.html

Answer 2

Si descarga el elemento de semillas de esta página (o simplementeMire los contenidos listados), verá que utiliza un archivo CSS externo.Puede examinar el elemento HTML para ver cómo se usa, pero es muy 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>

Luego, en semilla-element.css por defecto, tiene lo siguiente:

:host {
  display: block;
}

La forma en que lo entiendo (en mi conocimiento limitado) es que, si ha cambiado el nombre de la semilla, el elemento a mi elemento, esto sería lo mismo que hacer

my-element {
  display: block;
}