HTMLSlotElement

Интерфейс HTMLSlotElement API Shadow DOM позволяет получить доступ к имени и назначенным узлам элемента HTML <slot>.

Также наследует свойства от своего родительского интерфейса, HTMLElement.

HTMLSlotElement.name

Строка, используемая для получения и установки имени слота.

Также наследует методы от своего родительского интерфейса, HTMLElement.

HTMLSlotElement.assign()

Устанавливает вручную назначенные узлы для этого слота на указанные узлы.

HTMLSlotElement.assignedNodes()

Возвращает последовательность узлов, назначенных этому слоту. Если опция flatten установлена в true, она возвращает последовательность узлов, назначенных этому слоту, а также узлов, назначенных другим слотам, являющимся потомками этого слота. Если назначенные узлы не найдены, возвращается резервное содержимое слота.

HTMLSlotElement.assignedElements()

Возвращает последовательность элементов, назначенных этому слоту (и никаких других узлов). Если опция flatten установлена в true, она возвращает последовательность элементов, назначенных этому слоту, а также элементов, назначенных другим слотам, являющимся потомками этого слота. Если назначенные элементы не найдены, возвращается резервное содержимое слота.

Также наследует события от своего родительского интерфейса, HTMLElement.

Подпишитесь на эти события, используя addEventListener(), или назначив обработчик события к свойству oneventname этого интерфейса.

slotchange

Срабатывает в экземпляре HTMLSlotElement (<slot> элемент), когда меняются узел(ы), содержащиеся в этом слоте.

Следующий фрагмент взят из нашего примера slotchange (посмотреть онлайн).

let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

Здесь мы получаем ссылки на все слоты, а затем добавляем обработчик события slotchange ко второму слоту в шаблоне — это тот, содержимое которого постоянно меняется в примере.

Каждый раз, когда элемент, вставленный в слот, изменяется, мы регистрируем отчет в консоли, указывая, какой слот изменился и каким стал новый узел внутри слота.