CSS 疑似クラス関数で複合セレクターを効果的に使用する方法を学びます: host-context(<selector>)

Question

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 のようなスペースで区切られた複合セレクターを受け取ることができると期待していました。そのようになっているからです。ドキュメントページに記載されています。

＃＃＃ありがとう。

Answer 1

これは、MDN サンプルの無効なコードです。 <compound-selector> または <simple-selector> のみが受け入れられるタイプです。

変更を加えたので、この プル リクエスト は承認されました。

---

＃＃＃説明する＃＃＃

無効な例をドキュメントから削除しました。

ドキュメントの構文

リーリー

無効な例

リーリー

:host-context()

疑似クラス関数に指定された引数が <compound-selector> ではないため、これは無効です。代わりに、これは「セレクター リスト」ですが、これは無効であり、実際の例では機能しません。 リーリー

:host-context()

疑似クラス関数に指定された引数が <compound-selector> ではないため、これは無効です。代わりに、これは <complex-selector> ですが、これは無効であり、実際の例では機能しません。 これについては、

「セレクターの構造 - CSS セレクター - MDN ドキュメント」ページ

で説明されています。 ＃＃＃モチベーション＃＃＃ 無効な CSS は、

実際の例

を見るときに混乱を引き起こす可能性があります。