Элемент: свойство assignedSlot

Чтение только assignedSlot свойство интерфейса Element возвращает HTMLSlotElement, представляющий <slot> элемент, в который вставлен узел.

Экземпляр HTMLSlotElement, или null если элемент не назначен слоту, или если связанный теневой корень был прикреплён с mode, установленным на closed (см. Element.attachShadow для получения дополнительных сведений).

В нашем примере simple-template (посмотреть онлайн) мы создаём простой пример настраиваемого элемента, называемого <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> элемент, в котором был вставлен <span>.

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