Element.slot

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

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

Синтаксис

var aString = element.slot
element.slot = aString

Значение

DOMString.

Примеры

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

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

html

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

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

js

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

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

Specification
DOM Standard
# ref-for-dom-element-slot①

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

BCD tables only load in the browser