ポリマー2の要素に適用するスタイルシートを動的に含めるにはどうすればよいですか？

Question

は、私は、カスタムポリマー2ビデオプレーヤーの要素を持っていると私はそれに適用するスタイルシートを定義するために、各要素のインスタンスにプロパティに渡す機能（別のテーマ名が毎年リリースされ、現在のスタイルの各セットをしたいです予測可能な命名形式を持つ独自のファイルにサーバー上に存在します）。私はインラインタグでいくつかの例を見ましたが、それは小さいスタイルのための許容可能な解決策にしか見えません（そうでなければ、そこにはたくさんのスタイルが詰まっています。どのようにテーマを適切に行うことができますか？ここで

は、私は2つの別々のHTMLファイルで、これまでに得たものです：

デモファイル（demo-page.html）

<link rel="import" href="../my-video-player.html"> 
<my-video-player data="{...}" theme="2016"></my-video-player> 
<my-video-player data="{...}" theme="2017"></my-video-player> 

コンポーネントファイル（my-video-player.html）

<dom-module id="my-video-player"> 
    <template> 
     <link type="css" rel="import" href="css/[[theme]]/styles.css"> 
    </template> 
    <script> 
     class MyVideoPlayer extends Polymer.Element { 
      ... 
     } 
    </script> 
</dom-module> 

注：私は入れてみました上記のリンクタグはテンプレートタグの1レベル外にもありますが、それはうまくいきませんでした。

は今何が起こるかだけで2つのテーマのスタイルシートの一つは、私のコンポーネントの両方に適用されますです。代わりに最初のコンポーネントが2016.cssスタイルシートを適用し、2番目のコンポーネントが2017.cssスタイルシートを取得する必要があります。

Answer 1

外部スタイルシートを追加するには、必要なすべてのスタイルを含むカスタムコンポーネントを作成する必要があります。それでも、彼女はスタイルで使用されている共有コンポーネントに固有のスタイルを含めることができます

<link rel="import" href="/shared-styles.html"> 

<dom-module id="sus-app"> 
    <template> 
    <style include="shared-styles"></style> 
    <style> 
     neon-animated-pages { 
     height: 500px; 
     } 

     neon-animatable { 
     padding-top: 2em; 
     padding-left: 10em; 
     padding-right: 10em; 
     } 

お知らせ：次に、あなたは、このようなスタイルを使用して、コンポーネント（複数可）に「スタイル」コンポーネントをリンクすることができます。