:host-context()

概要

Shadow DOM内部のスタイルから、ホスト要素の外部コンテキスト（祖先要素）に基づいてスタイルを変更できます。ダークモードやテーマの切り替え、言語に応じたスタイル調整など、コンポーネント外部の状態に応答する場合に有用です。Shadow DOMのカプセル化を維持しつつ外部環境への適応が可能になります。

対応ブラウザ

基本構文

:host-context(.dark-theme) {
  background: #333;
  color: #fff;
}
:host-context([dir='rtl']) {
  direction: rtl;
}

実務での使いどころ

• テーマ対応コンポーネント

  親要素のテーマクラスに応じてコンポーネントの配色を自動的に切り替え、ダークモードに対応します。

注意点

アクセシビリティ

• テーマ切り替え時にコントラスト比が維持されることを確認し、すべてのテーマでWCAGのカラーコントラスト基準を満たしてください。

参考リンク

• MDN Web Docs — :host-context()