Puis-je faire d'un modèle de style externe?

Question

Dans Google Polymère leçon 1, ils ont un exemple qui comprend une ligne de la feuille de style.Je voudrais le déplacer vers un fichier css, mais le style est à l'intérieur d'une balise de modèle.Pour aggraver les choses, il dit que c'est

Utilisé à l'intérieur d'une ombre arborescence DOM, l' :hôte pseudo-classe correspond à l' élément qui héberge l'arbre.Dans ce cas, elle correspond à la de l'élément.

Q:Puis-je déplacer ce style dans un fichier css?

Answer 1

Si vous voulez style, les éléments qui font partie d'un des éléments personnalisés Shadow DOM, vous devez utiliser le ::shadow sélecteur ou /deep/ sélecteur si vous souhaitez sélectionner des éléments quel que soit le nombre de niveaux de profondeur qu'ils sont assis à l'intérieur de l'Ombre DOM.

Donc, à partir de l'extérieur, vous auriez un style p l'élément qui est à l'intérieur x-foo's Shadow DOM comme ceci:

x-foo::shadow p {

}

Vous pouvez lire à propos de tout ça ici: http://www.polymer-project.org/articles/styling-elements.html

Answer 2

Si vous téléchargez l'élément de graine de Cette page (ou justeRegardez les contenus énumérés), vous verrez qu'il utilise un fichier CSS externe.Vous pouvez examiner l'élément HTML pour voir comment il est utilisé, mais c'est très 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>

Puis dans la graine-element.CSS par défaut, vous avez les suivants:

:host {
  display: block;
}

La façon dont je le comprends (dans mes connaissances limitées) est que si vous souhaitez renommer l'élément de semence à mon-élément, ce serait le même que de faire

my-element {
  display: block;
}