外からの影のDOMのスタイリング方法を探しています。たとえば、すべての 'span.special'要素のすべてのテキストの色をREDに設定したいとします。 shadow DOMの 'span.special'要素をインクルードします。どのように私はこれを行うことができますか？外からの影のDOMスタイリング
は、以前は、この目的のために::影擬似要素と>>>別名/深い/コンビネータがありました。だから私は
span.special, *::shadow span.special {
color: red
}
しかし、今ような何かを書くことができ::影、/深い/と>>>は推奨されません。だから、彼らの代わりに何を持っていますか？
あなたはこのanswerで説明されているように@import cssを使用することができます。
シャドウツリーの要素内にルールを含めます。。
<style>
@import url('/css/external-styles.css')
</style>
>>> combinatorはまだCSSスコープモジュールのドラフトの一部であることに注意してください。
1）カスケード：あなたが変更することはできませんライブラリのWebコンポーネントを使用している場合
まあ、@importは...
ソリューションではありません最後に、私はそれを行うには、いくつかの方法を発見しました。 Shadow DOMのホスト要素のスタイルは、Shadow DOM要素にも影響します。 Shadow DOMの特定の要素をスタイルする必要がある場合にはオプションではありません。
2）カスタムプロパティhttps://www.polymer-project.org/1.0/docs/devguide/styling ウェブコンポーネントの作成者がそのような情報を提供した場合。
3）ポリマー、）もhttps://www.polymer-project.org/1.0/docs/devguide/styling
4カスタムミックスインを持って@importではなく、唯一のライブラリではないコンポーネントの
だから、そこにいくつかの可能性がありますが、それらのすべてが限られています。外からのスタイリングに十分な強力な方法はありません::影がありました。