Element.slot

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

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

Синтаксис

var aString = element.slot
element.slot = aString

Значение

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 файле мы получаем ссылку <span>, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <slot>.

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

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

Спецификация Статус Комментарий
DOM
Определение 'slot' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
slotChrome Полная поддержка 53Edge ? Firefox Полная поддержка 63IE ? Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 53Chrome Android Полная поддержка 53Firefox Android Полная поддержка 63Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна