Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

Host

:host は CSS の 擬似クラスで、その CSS を含むシャドウ DOM のシャドウホストを選択します。 — 言い換えれば、シャドウ DOM の中からカスタム要素を選択できるようにします。

メモ: これはシャドウ DOM の外で使われたときには効果がありません。

Shadow DOM疑似クラス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:host
54
79
63
10
54
10
その他
css.selectors.hostfunction

`:host()`
54
79
63
10
54
10
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • 特定の CSS セレクター (:host > .local-child) が機能せず、スロット付きコンテンツ (::slotted) のスタイル設定にバグがあります。
注釈 1件
実装メモ
  • 特定の CSS セレクター (:host > .local-child) が機能せず、スロット付きコンテンツ (::slotted) のスタイル設定にバグがあります。

基本構文

CSS 
:host {
  display: block;
  border: 1px solid #ccc;
}
:host(.active) {
  border-color: blue;
}

ライブデモ

:host Basics

CSS:host basic demo.

プレビュー全画面表示

:host(.active)

CSS:host(.active) demo.

プレビュー全画面表示

:host-context()

CSS:host-context() demo.

プレビュー全画面表示

実務での使いどころ

  • Web Componentの基本スタイル設定

    Shadow DOM内からホスト要素にdisplayやpadding等のデフォルトスタイルを設定し、コンポーネントの見た目を制御します。

注意点

  • :hostのスタイルはドキュメント側のスタイルよりも優先度が低いため、外部からのスタイル上書きが可能であることを理解しておいてください。

アクセシビリティ

  • ホスト要素に適切なARIAロールを設定し、Shadow DOM内のコンテンツがスクリーンリーダーで正しく認識されるようにしてください。

参考リンク