テンプレートスタイルを外部にすることはできますか？

Question

Google Polymer Resson 1 インラインスタイルシートを含む例。 CSSファイルに移動したいが、スタイルはテンプレートタグ内にあります。 問題を悪化させるために、それは

を言う

シャドウDOMツリー内で使用される：ホスト疑似クラスが一致する ツリーをホストする要素。この場合、それはと一致します 要素

Q：このスタイルをCSSファイルに移動できますか？

Answer 1

カスタム要素の一部である要素をシャドウDOMにスタイル化したい場合は、Shadow DOMの中にあるレベルの深さの数を奥行きにしたい場合は、::shadow Selectorまたは/deep/ Selectorを使用する必要があります。

それで、外部から、pのシャドウDOMのようなx-foo要素をスタイルすることです。

x-foo::shadow p {

}

.

ここでのすべてのものについて読むことができます。 http：//www.polymer-project.org/articles/styling-elements.html

Answer 2

このページ（または単に）をダウンロードした場合リストされている内容を見てください）、外部CSSファイルを使用することがわかります。要素HTMLを調べて、使用方法を確認できますが、非常に単純です。

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

.

その後、seed-element.cssではデフォルトで次のものがあります。

:host {
  display: block;
}

.

それを理解する方法（私の限られた知識で）seed要素の名前をmy要素に変更しようとした場合、これは

と同じでしょう。

my-element {
  display: block;
}

.