Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

:has-slotted

:has-slotted は CSS の擬似クラスで、 <slot> 要素のコンテンツが空ではないか、または既定値を使用していない場合に一致します（詳細については、テンプレートとスロットの使用を参照してください）。

メモ: 単一の空白テキストノードでも :has-slotted が適用されます。

これは、シャドウ DOM 内に配置された CSS 使用した場合にのみ動作します。

css

/* 既定ではないコンテンツを持つ <slot> 要素のコンテンツを選択 */ :has-slotted { color: green; }

/* コンテンツまたは既定のコンテンツを持たない <slot> 要素のコンテンツを選択 */ :not(:has-slotted) { color: red; }

疑似クラスWebコンポーネント

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:has-slotted`			136

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

slot:has-slotted {
  border: 1px solid blue;
  padding: 8px;
}
slot:not(:has-slotted) {
  color: gray;
}

CSS slot with demo.

CSS slotempty demo.

CSS condition withstyle demo.

スロットの状態に応じたスタイリング

Web Componentのスロットにコンテンツが挿入されている場合のみ装飾を適用し、フォールバック表示時は異なるスタイルにします。