【CSS Modules】:host疑似クラスの使い方
:host疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:host疑似クラスは、WebコンポーネントのシャドウDOM内で、シャドウルートがアタッチされている要素そのもの、すなわち「ホスト要素」を選択し、スタイルを適用するためのCSSセレクタです。
Webコンポーネントは、独自のHTML、CSS、JavaScriptをカプセル化して再利用可能な独立した部品として機能します。シャドウDOMは、このコンポーネントのスタイルが外部環境に影響を与えたり、外部から影響を受けたりしないよう、スタイルを完全に隔離する役割を担います。
この:host疑似クラスを利用すると、コンポーネント内部のスタイルシートから、そのコンポーネント自体（例えば、<my-component>のようなカスタム要素）に直接スタイルを適用できます。例えば、シャドウDOM内で:host { display: block; padding: 10px; }と記述することで、<my-component>要素自体の表示形式や余白を制御することが可能です。
これにより、コンポーネント開発者は、コンポーネントが配置されるページのCSS設定に左右されることなく、ホスト要素の基本的な外観を定義し、コンポーネントの視覚的な一貫性を確実に維持できます。:host疑似クラスは、Webコンポーネントの独立したスタイル管理を可能にする、シャドウDOMにおいて不可欠な機能です。
公式リファレンス: :host
構文(syntax)
1:host { 2 /* ホスト要素自身のスタイルをここに記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません