2016-03-25 10 views
6

ポリマーは<style is="custom-style">をサポートしています。これにより、エレメントにのみ適用されるスタイルを定義できます。影のDOM。ポリマーのカスタムスタイルと共有スタイルの比較

ポリマーは<dom-module id="shared-styles">もサポートしています。これにより、要素定義にインポートできる一連のスタイル宣言をパッケージ化できます。

したがって、両方のポイントは、ポリマー要素をスタイルすることができるように思われます。なぜあなたはもう一方を使いますか?ユースケースは実質的に重複しているようです。

追加の混乱:shared-stylescustom-styleにインポートすることができます。なぜあなたはこれをやりますか?何故なの?

答えて

13

<dom-module id="my-shared-styles">は、要素にインポートできる再利用可能なスタイルのモジュールハット、または<style is="custom-style">タグを宣言します。

<head>で例えば)カスタム要素の外側

カスタム要素で使用

<dom-module id="my-element> 
    <template> 
    <style include="my-shared-styles"></style> 
    ... 
    </template> 
</dom-module> 

または<style>タグで

<head> 
    <style is="custom-style" include="my-shared-styles"></style> 
</head> 

<style is="custom-style">あなたはポリマーCSS機能を使用したい場合にのみ必要です<dom-module>の内部にないスタイル要素内のスタイル(CSS変数とミックスイン) <dom-module>の内部にはちょうど<style>で十分です。

+0

1つの手法でしか解決できない問題はありますか? –

+0

これらはどちらもポリマーCSS機能をサポートしています。違いは、スタイルが適用されるスコープです。