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