MIXIN、私はファイルを作成するポリマー

Question

のクラスとカスタム要素を含むmy-mixins.htmlと呼ばれる：（それはになっていたように）--redが働いている間

<link rel="import" href="bower_components/my-mixins/my-mixins.html"> 

<link rel="import" href="../polymer/polymer.html"> 

<dom-module is="my-element"> 
    <style> 
    .red { 
     @apply(--red); 
    } 
    ... 
    </style> 

    <p class="red">This is red</p> 
    <p class="green">This is not green</p> 

    <script> 
    Polymer({ 
     is: 'my-element' 
    }); 
    </script> 

</dom-module> 

、：

<link rel="import" href="../polymer/polymer.html"> 
<style is="custom-style"> 
    :root { 
    --red: { 
     color: red; 
    }; 
    } 

    // This won't work 
    .green: { 
    color: green; 
    } 
</style> 

それから私は、要素my-element.htmlを作成します.greenしませんでした。 これは、スタイリングが流出しないことを確認することです。しかし、実際にはルールは何ですか？どのように--redが設定され、それはモジュールに利用可能ですが、​​はそうではありませんか？

Answer 1

私は、CSSカスタムプロパティをスタイルプレースホルダとして使用して内部スタイルを微調整するオプションを提供することができると信じています。

.greenが漏れていないのは、Shadow DOMのスコープ設定されたCSS機能によるものです。

You can read more about stylehooks in Eric Bidelman's Shadow DOM v1 primer

Answer 2

私の質問の答えはここにあった：

https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style

具体的に：

ポリマーは、メイン文書にスタイルを定義するためのカスタム要素を提供しますポリマーのスタイリングシステムのいくつかの特長を利用することができます：

カスタムスタイルで定義されたドキュメントスタイルは、ネイティブのシャドーDOMのないブラウザで実行されているときにローカルDOMに漏れないようにシミングされています。

Cross-scopeスタイリングのためにPolymerのshimで使用されるカスタムプロパティは、カスタムスタイルで定義することができます。 ：ルートセレクタを使用して、すべてのカスタム要素に適用されるカスタムプロパティを定義します。したがって

、ドキュメントは[本]（https://www.polymer-project.org/