特定の要素にのみカスタムスタイルを適用するにはどうすればよいですか？

私はテーマ対応のポリマーウェブコンポーネントを開発しています。 custom-styleドキュメントごととして、私は、次のやっている：それは私のすべての要素にカスタムテーマを適用するよう特定の要素にのみカスタムスタイルを適用するにはどうすればよいですか？

<link rel="import" href="themes/my-element-theme.html"> 
    <style is="custom-style" include="my-element-theme"></style>

しかし、これは鈍器です。次のように

一つの解決策は、CSSクラスにスコープにすべての私のテーマのスタイルです：

:root custom-element.my-element-theme { 
    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; 
}

しかし、これはそれが困難な文書全体にカスタムスタイルを適用することができます。

CSSセレクタを使用して、要素にカスタムスタイルをより選択的に適用する方法はありますか？ベストプラクティスとは何ですか？

出典

2016-11-08 Ricardo Gladwell

セレクタを使用して、テーマ設定可能な要素に選択的にスタイルを適用することは間違いありません。

カスタムプロパティとミックスインを使用し、それらの値をターゲット要素に設定することをお勧めします。ここでは例です：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import" /> 
 
    <style is="custom-style"> 
 
    .container1 my-elem { 
 
     --my-elem-span: { 
 
     color: red; 
 
     } 
 
    } 
 
    
 
    .container2 my-elem { 
 
     --my-elem-span: { 
 
     color: blue; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container1"> 
 
    <my-elem>hello red</my-elem> 
 
    </div> 
 
    <div class="container2"> 
 
    <my-elem>hello blue</my-elem> 
 
    </div> 
 
    
 
    <dom-module id="my-elem"> 
 
    <template> 
 
     <style> 
 
     :host { display: block; } 
 
     
 
     :host span { 
 
      @apply(--my-elem-span); 
 
     } 
 
     </style> 
 
     
 
     <span><content></content></span> 
 
    </template> 
 
    
 
    <script> 
 
     Polymer({ 
 
     is: 'my-elem' 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
</body> 
 
</html>

そして、あなたは別のスタイルモジュールでCSSルールを置くことによって行ったように、あなたはあなたのスタイルを外部化することができます。

<dom-module id="my-elem-theme"> 
    <template> 
    <style> 
     .container1 my-elem { 
     --my-elem-span: { 
      color: red; 
     } 
     } 

    .container2 my-elem { 
     --my-elem-span: { 
     color: blue; 
     } 
    } 
    </style> 
    </template> 
</dom-module>

あなたは、あなたのやり方インポート：

<link rel="import" href="my-elem-theme.html"> 
<style is="custom-style" include="my-elem-theme"></style>

を

出典

2016-11-08 19:21:07

特定の要素にのみカスタムスタイルを適用するにはどうすればよいですか？

答えて

関連する問題