ポリマー1.4.0〜1.7.0、グローバル：ルートスタイルはもう機能しません

Question

深い内側のコンポーネントを含め、どこにでも適用されるスタイルがいくつかあります。彼らはこのように定義している：

<style id="base-css" is="custom-style"> 
    :root .primary { 
     color: red; 
    } 
</style> 

結果は私が持っていた場合には、例えば、<span class="primary">どこでも、どんなに深いポリマー成分の内部、それは常に適用されないだろうということでした。私は、これはもはや機能し、1.7.0に私のポリマーを更新しなかったので

:not([style-scope]):not(.style-scope):root .primary { 
    color: red; 
} 

---

：実際には、このスパンを検査することは、スタイルは以下のように書き直されたことを示しています。このように定義されたスタイルは、もはやコンポーネントに浸透しなくなり、それらの外側でのみ機能します。

すべての内部要素は、それらに .style-scopeを持っているので、もちろん、部品の内部で動作しない、

html .primary:not([style-scope]):not(.style-scope) { 
    color: red; 
} 

：身体に.primaryとスパンを追加し、それを検査することはスタイルが今のように書き換えされていることを示しています。

私は1.7.0リリースノートを読んで、をhtmlに置き換えようとしましたが、まったく同じ結果になりました。

誰も私がこれを再び動作させる方法を知っていますか？

ありがとうございます。

Answer 1

あなたはCSSのカスタムプロパティを使用してスタイリングのフックを提供している場合は、内部のスタイルを微調整することができますCSSのカスタムプロパティに

を使用して、スタイルフックを作成します。メインページからオーバーライドできる要素内にスタイルプレースホルダを作成します。要素内

<style> 
    base-css { 
    --primary: red; 
    } 
</style> 

：メインページインサイド

<style> 
     :host([background]) { 
      // Use --primary is not define, use #9E9E9E 
      background: var(--primary, #9E9E9E); 
     } 
    </style> 

ドキュメント

Using CSS variables

Shadow DOM v1: Self-Contained Web Components