【CSS Modules】:has-slotted疑似クラスの使い方

:has-slotted擬似クラスは、WebコンポーネントのShadow DOM内で、外部からコンテンツが割り当てられた <slot> 要素自身を選択するための擬似クラスです。

Webコンポーネントでは、カスタム要素の内部構造（Shadow DOM）と、それに提供される外部からのコンテンツ（ライトツリー）を分離して管理します。Shadow DOM内の <slot> 要素は、このライトツリーからコンテンツを受け取るプレースホルダーとして機能します。 <slot> 要素に実際にコンテンツが割り当てられているか否かによって、その <slot> 要素自身のスタイルや挙動を変更したいというニーズが生じることがあります。

:has-slotted擬似クラスは、このような場合に利用されます。例えば、特定の <slot> にコンテンツが与えられた場合にのみ、その <slot> 要素に異なる背景色や境界線を適用するといったスタイル制御が可能です。これにより、コンテンツの有無に応じてコンポーネントの見た目を動的に調整し、ユーザーインターフェースの柔軟性を高めることができます。

この擬似クラスは、::slotted() 擬似要素と混同されがちですが、両者には明確な違いがあります。::slotted() が <slot> に割り当てられた「コンテンツ自体」を選択するのに対し、:has-slotted は「コンテンツを受け取った <slot> 要素そのもの」を選択します。これらを適切に使い分けることで、Webコンポーネントの表現力を最大限に引き出すことが可能です。

Copy
1element-name:has-slotted {
2  /* スタイル定義 */
3  property: value;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません