HTMLSlotElement: событие slotchange

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

Для того, чтобы вызвать событие slotchange, необходимо установить или удалить атрибут slot.

Это событие нельзя отменить.

Используйте имя события в методах, таких как addEventListener(), или установите обработчик событий.

addEventListener("slotchange", (event) => {});

onslotchange = (event) => {};

Общее событие Event.

element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null

Следующий фрагмент взят из нашего примера 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}".`,
  );
});

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

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