MDN ドキュメントでは、:host-context()
は次のように定義されています:
:host-context() CSS 疑似クラス関數(shù)は、CSS のシャドウ DOM を含むシャドウ ホストを選択します (そのため、そのシャドウ DOM からカスタム要素を選択できます) - ただし、関數(shù)の引數(shù)として指定された場合のみです。セレクターは、DOM 階層內(nèi)のシャドウ ホストの祖先の位置と一致する場合にのみ有効です。 言い換えれば、これにより、カスタム要素またはそのシャドウ DOM 內(nèi)のあらゆるものに、外部 DOM 內(nèi)の位置、または祖先要素に適用されたクラス/プロパティに基づいて、異なるスタイルを適用できるようになります。
問題は、提供されている実際の例では、:host-context(article,side) { color: grey; }
ステートメントが機能しないことです。同様に、:host-context(h1 a){background:orange}
のような他のスペース區(qū)切りの複合セレクターを追加しようとすると、同じ問題が発生します。
以下はドキュメント ページに記載されている例です:
リーリー なぜこれが起こっているのか、またはスペース區(qū)切りのセレクター (子孫セレクターなど) を :host-context()
疑似クラス関數(shù)のパラメーターで機能させる方法を知っている人はいますか?
:host-context()
擬似クラス関數(shù)は、引數(shù)として h1 a
のようなスペースで區(qū)切られた複合セレクターを受け取ることができると期待していました。そのようになっているからです。ドキュメントページに記載されています。
これは、MDN サンプルの無効なコードです。 <compound-selector>
または <simple-selector>
のみが受け入れられるタイプです。
変更を加えたので、この プル リクエスト は承認されました。
ドキュメントの構(gòu)文
リーリー無効な例
リーリー 疑似クラス関數(shù)に指定された引數(shù)が <compound-selector>
ではないため、これは無効です。代わりに、これは「セレクター リスト」ですが、これは無効であり、実際の例では機能しません。
リーリー
疑似クラス関數(shù)に指定された引數(shù)が <compound-selector>
ではないため、これは無効です。代わりに、これは <complex-selector>
ですが、これは無効であり、実際の例では機能しません。
これについては、
で説明されています。 ###モチベーション### 無効な CSS は、
実際の例