--- title: Element.slot slug: Web/API/Element/slot tags: - API - DOM - Element - Property - Reference - shadow dom translation_of: Web/API/Element/slot ---

{{APIRef("Shadow DOM")}}

Свойство slot интерфейса {{domxref("Element")}} возвращает имя слота теневого DOM, в который вставлен элемент.

Слот slot это заполнитель внутри веб компонента, который пользователи могут заполнить собственной разметкой (смотри Использование шаблонов и слотов для получения дополнительной информации).

Синтаксис

var aString = element.slot
element.slot = aString

Значение

{{domxref("DOMString")}}.

Примеры

В нашем примере простого шаблона (смотри в прямом эфире), мы создаём тривиальный пример пользовательского элемента с именем <my-paragraph>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем my-text.

Когда в документе используется <my-paragraph>, слот заполняется слот-элементом, включая его в элемент с атрибутом slot со значением my-text. Вот один из таких примеров:

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регистрируем ссылку на имя соответствующего элемента <slot>.

let slottedSpan = document.querySelector('my-paragraph span')
console.log(slottedSpan.slot); // logs 'my-text'

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

Спецификация Статус Комментарий
{{SpecName('DOM WHATWG','#dom-element-slot','slot')}} {{Spec2('DOM WHATWG')}}

Поддержка браузерами

{{Compat("api.Element.slot")}}