:host-context()
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
:host-context() は CSS の擬似クラスで、シャドウホスト（シャドウルートを保有する要素）とその DOM 上の祖先のセレクターに基づいて、シャドウ DOM 内の要素のスタイルを別々に設定することができます。
通常、シャドウ DOM 内の要素は、その外部の DOM から分離されています。:host-context() を使用すると、このシャドウ DOM の「外側を覗き見」して、要素の親要素のいずれかが特定の CSS セレクターと一致するかどうかを確認することができます。例えば、<body> に .dark-theme クラスが適用されている場合、シャドウルート内の要素に別のテキストの色を適用することができます。
これを次のように考えてみてください。 <greenhouse> という独自の要素があり、その中に <chameleon> が存在するとします。ここで、 <greenhouse> はシャドウ DOM ホストであり、 <chameleon> 要素はシャドウ DOM 内にあります。 :host-context() を使用すると、 <greenhouse> の環境に応じて <chameleon> の外観を変更することができます。 <greenhouse> が日なた（クラス "sunny-theme" が指定されている）にある場合、 <chameleon> は黄色になります。 <greenhouse> が日陰（代わりにクラス "shady-theme" が適用されている）にある場合、 <chameleon> は青色になります。
このセレクターは、すべてのシャドウ境界を貫通します。これは、<greenhouse> またはホストの祖先および祖先の DOM のいずれかに直接適用されている、日なたのテーマまたは日陰のテーマを、文書ルートに到達するまでずっと見ていきます。
セレクターを直接 <greenhouse> ホストのみに制限したり、選択をホストの DOM に制限したりするには、代わりに :host または :host() 擬似クラスを使用します。
メモ: これは、シャドウ DOM の外で使用しても効果はありません。
:host-context() の詳細度は、擬似クラスの詳細度と、関数の引数として渡されたセレクターの詳細度の合計です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
:host-context 非推奨 | 54 | 79 | | | 54 | |
基本構文
:host-context(.dark-theme) {
background: #333;
color: #fff;
}
:host-context([dir='rtl']) {
direction: rtl;
}ライブデモ
実務での使いどころ
-
テーマ対応コンポーネント
親要素のテーマクラスに応じてコンポーネントの配色を自動的に切り替え、ダークモードに対応します。
注意点
- Chrome/Edgeでのみサポートされており、SafariやFirefoxでは利用できません。代替手法としてCSS Custom Propertiesの使用を検討してください。
アクセシビリティ
- テーマ切り替え時にコントラスト比が維持されることを確認し、すべてのテーマでWCAGのカラーコントラスト基準を満たしてください。