:has-slotted

Псевдоклас CSS :has-slotted (має вставлене) дає збіг, коли вміст елемента <slot> не є порожнім або не використовує усталене значення (дивіться докладніше на сторінці Використання шаблонів і слотів).

[!NOTE] Навіть текстового вузла, що складається з єдиного пробілу, достатньо для застосування :has-slotted.

Це працює лише в межах CSS, розміщеного всередині тіньового DOM.

/* Вибирає вміст елемента <slot>, який має вміст, що не є усталеним */
:has-slotted {
  color: green;
}

/* Вибирає вміст елемента <slot>, який не має вмісту або має усталений */
:not(:has-slotted) {
  color: red;
}

Синтаксис

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

Приклади

Цей приклад містить два елементи <slot>, один з яких має призначений вміст, а інший – ні.

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.

Специфікації

Сумісність із браузерами

Дивіться також

• Елемент HTML <template>
• Елемент HTML <slot>
• ::slotted