`:has-slotted` CSS псевдокласс

:has-slotted CSS псевдокласс соответствует элементу, если содержимое элемента <slot> не пусто или не использует значение по умолчанию (подробнее см. в статье Использование шаблонов и слотов).

Это работает только при использовании внутри CSS, размещённого в теневом DOM.

/* Selects the content of a <slot> element that has content that is not default  */
:has-slotted {
  color: green;
}

/* Selects the content of a <slot> element that has no content or default  */
:not(:has-slotted) {
  color: red;
}

Синтаксис

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

Примеры

В этом примере есть два элемента <slot>: одному назначено содержимое, а другому — нет.

HTML

<p>
  <template shadowrootmode="open">
    <style>
      :has-slotted {
        color: rebeccapurple;
      }
    </style>
    <slot name="one">Placeholder 1</slot>
    <slot name="two">Placeholder 2</slot>
  </template>
  <span slot="one">Slotted content</span>
</p>

Результат

Элемент <slot>, которому назначено содержимое, соответствует псевдоклассу :has-slotted, поэтому к нему применяется значение rebeccapurple свойства color.

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

Совместимость с браузерами

См. также

• Элемент HTML <template>
• Элемент HTML <slot>
• ::slotted()