Элемент <slot> используется внутри веб-компонентов и служит для отображения внешнего содержимого, передаваемого в компонент. Это называется «проецирование контента» — <slot> позволяет вставлять элементы в заранее заданные области внутри Shadow DOM.

<slot> входит в Baseline c 15 января 2020 года.

Пример использования

<!-- index.html -->
<user-card>
  <h2 slot="name">Иван Иванов</h2>
  <p>Фронтенд-разработчик</p>
</user-card>

<!-- user-card.js -->
<template id="user-template">
  <article>
    <header>
      <slot name="name">Имя не указано</slot>
    </header>
    <section>
      <slot></slot>
    </section>
  </article>
</template>

Как работает

  1. Компонент user-card создаёт Shadow DOM и добавляет в него элемент <slot>.
  2. Внешние элементы, вложенные в тег user-card, автоматически подставляются в слоты:
    • <h2 slot="name"> попадает в <slot name="name">
    • <p> попадает в безымянный слот <slot>
  3. Если слот пуст — отображается его содержимое по умолчанию.

Атрибуты

name — имя слота. Используется для связи с элементами, у которых есть атрибут slot="...".

Свойства и методы в JS

  • HTMLSlotElement.assignedNodes() — возвращает список узлов, вставленных в слот.
const slot = shadowRoot.querySelector('slot[name="name"]');
const nodes = slot.assignedNodes();

Стилизация содержимого

Слот нельзя напрямую стилизовать, но можно стилизовать его содержимое с помощью псевдоэлемента ::slotted():

::slotted(h2) {
  font-size: 1.5em;
  color: darkblue;
}

⚠️ Псевдоэлемент ::slotted() работает только с непосредственными потомками, переданными в слот.

Особенности

  • Слот без атрибута name — это безымянный слот, туда попадают все элементы без slot="...".
  • В компоненте может быть только один безымянный слот.
  • Содержимое слотов остаётся в Light DOM — доступно для внешних скриптов и стилей, но не для стилей изнутри Shadow DOM (кроме ::slotted).

Когда использовать

Для создания гибких компонентов: карточек, модалок, выпадающих списков, табов и других UI-элементов, где важна кастомизация содержимого.

Поддержка браузеров

Все современные браузеры поддерживают <slot> как часть спецификации Shadow DOM v1.

Итого

  • <slot> используется только внутри Shadow DOM.
  • Позволяет проецировать внешний HTML внутрь компонента.
  • Поддерживает именованные и безымянные области.
  • Работает в связке с slot="..." у передаваемых элементов.

Это один из ключевых элементов при создании веб-компонентов на чистом JavaScript.