: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>

結果

コンテンツが割り当てられた <slot> 要素は、擬似クラス :has-slotted と一致し、color 値 rebeccapurple が適用されています。

仕様書

Specification
CSS Scoping Module Level 1
# the-has-slotted-pseudo

ブラウザーの互換性

関連情報