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

Значение

Примеры

В нашем примере простого шаблона (смотри в прямом эфире), мы создаём тривиальный пример пользовательского элемента с именем <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
# ref-for-dom-element-slot①

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
slot

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support