Element.slot

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

Синтаксис

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