:has-slotted
Web Componentsの<slot>要素に対して、スロットにコンテンツが挿入されているかどうかに基づいてスタイルを適用できます。フォールバックコンテンツとスロット済みコンテンツで異なるスタイリングが必要な場合に有用です。テキストノードや空白を含む、あらゆるスロット済みコンテンツにマッチします。
概要
Web Componentsの<slot>要素に対して、スロットにコンテンツが挿入されているかどうかに基づいてスタイルを適用できます。フォールバックコンテンツとスロット済みコンテンツで異なるスタイリングが必要な場合に有用です。テキストノードや空白を含む、あらゆるスロット済みコンテンツにマッチします。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 136+
モバイル
Chrome Android 未対応
Safari iOS 未対応
Firefox Android 136+
基本構文
CSS
slot:has-slotted {
border: 1px solid blue;
padding: 8px;
}
slot:not(:has-slotted) {
color: gray;
}実務での使いどころ
-
スロットの状態に応じたスタイリング
Web Componentのスロットにコンテンツが挿入されている場合のみ装飾を適用し、フォールバック表示時は異なるスタイルにします。
注意点
- 2026年3月時点でFirefoxのみの対応であり、他のブラウザでは利用できません。
アクセシビリティ
- スロットのコンテンツ有無によるスタイル変更が、コンテンツの可視性やコントラストに悪影響を及ぼさないよう注意してください。