【CSS Modules】:host疑似クラスの使い方
:host()疑似クラスの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
:host()クラスは、Web ComponentsのShadow DOM内で使用され、そのShadow DOMをホストしている要素自身（Shadow Host）を表す擬似クラスです。Web Componentsは、再利用可能なカスタム要素を作成するための技術であり、Shadow DOMはその内部構造とスタイルを外部からカプセル化するために利用されます。通常、Shadow DOM内部のスタイルは外部に影響を与えませんが、ホスト要素自身にスタイルを適用したい場合に:host()が役立ちます。
この擬似クラスを使うことで、コンポーネントの内部から、コンポーネントの外部にあるホスト要素（例えば、<my-component>というカスタム要素そのもの）のスタイルを定義できます。例えば、:host { display: block; } と記述することで、Shadow DOMを内包するカスタム要素の表示形式をブロックレベルに設定することができます。
さらに、:host()は引数としてセレクターを受け取ることができます。例えば、:host(.active) { color: red; } のように記述すると、ホスト要素が指定されたセレクター（この場合は.activeクラス）にマッチする場合にのみ、そのスタイルが適用されます。これにより、ホスト要素の状態や属性に応じて、コンポーネントの外観を柔軟に制御することが可能になります。
:host()は、Webコンポーネントがそのホスト要素に対して、カプセル化されたスタイル規則を適用するための重要なメカニズムを提供します。これにより、コンポーネント開発者は、コンポーネントの振る舞いや状態に基づいて、一貫性のある外見を維持しつつ、堅牢なカスタム要素を作成できます。
構文(syntax)
1:host { 2 display: block; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません