<slot>: Элемент слота веб-компонентов

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Элемент <slot> HTML — часть набора технологий Веб-компонентов — это заполнитель внутри веб-компонента, который вы можете заполнить своим разметкой, что позволяет создавать отдельные деревья DOM и отображать их вместе.

Атрибуты

Этот элемент включает глобальные атрибуты.

name

Имя слота.

Именованный слот — это <slot> элемент с атрибутом name.

Примеры

html

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">NEED NAME</slot>&gt;
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>

Примечание: Полный пример можно посмотреть по адресу element-details (посмотреть онлайн). Кроме того, вы можете найти объяснение по адресу Использование шаблонов и слотов.

Техническое описание

Категории содержимого	Текстовое содержимое, Фразовое содержимое
Разрешённое содержимое	Прозрачное
События	`slotchange`
Пропуск тегов	Ничего, как начальный, так и конечный теги обязательны.
Разрешённые родительские элементы	Любой элемент, принимающий фразовое содержимое
Неявная роль ARIA	Нет соответствующей роли
Разрешённые роли ARIA	Нет `role` разрешённых ролей
Интерфейс DOM	`HTMLSlotElement`

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

Спецификация
Стандарт HTML # the-slot-element
Стандарт DOM # shadow-tree-slots

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`slot`	53	79	63	40	10	53	63	41	10	6.0	53
`name`	53	79	63	40	10	53	63	41	10	6.0	53

См. также

Элемент HTML <template>
Атрибут HTML slot
Псевдоэлемент CSS ::slotted
Модуль CSS-ограничений

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot