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

Host

Shadow DOM内のスタイルからホスト要素自体にスタイルを適用するための疑似クラスです。Web Componentsのカプセル化されたスタイルの中から、コンポーネントのルート要素のデフォルトスタイルを設定できます。:host()関数型ではセレクターを渡して条件付きスタイリングが可能です。

Shadow DOM疑似クラス

概要

Shadow DOM内のスタイルからホスト要素自体にスタイルを適用するための疑似クラスです。Web Componentsのカプセル化されたスタイルの中から、コンポーネントのルート要素のデフォルトスタイルを設定できます。:host()関数型ではセレクターを渡して条件付きスタイリングが可能です。

対応ブラウザ

デスクトップ

Chrome 54+
Edge 79+
Safari 10+
Firefox 63+

モバイル

Chrome Android 54+
Safari iOS 10+
Firefox Android 63+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク