:has-slotted

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

css

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

構文

css

:has-slotted { /* ... */ }

例

この例には 2 つの <slot> 要素があり、一方はコンテンツが割り当てられていますが、もう一方は割り当てられていません。

HTML

html

<p> <template shadowrootmode="open"> <style> :has-slotted { color: rebeccapurple; } </style> <slot name="one">プレイスホルダー 1</slot> <slot name="two">プレイスホルダー 2</slot> </template> <span slot="one">スロットされたコンテンツ</span> </p>