HTMLSlotElement: метод assignedNodes()

Метод assignedNodes() интерфейса HTMLSlotElement возвращает последовательность узлов, назначенных этому слоту.

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

options Необязательно

Объект, устанавливающий опции для возвращаемых узлов. Доступные опции:

flatten

Булево значение, указывающее, нужно ли возвращать назначенные узлы любых доступных дочерних элементов <slot> (true) или нет (false). По умолчанию false.

Массив узлов.

Следующий фрагмент взят из нашего примера 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 ко второму слоту в шаблоне — тому, чье содержимое постоянно изменяется в примере.

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