:has-slotted

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

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