ShadowRoot: свойство slotAssignment

Только для чтения slotAssignment свойство интерфейса ShadowRoot возвращает режим назначения слотов для дерева тенистого DOM. Узлы могут быть назначены автоматически (named) или вручную (manual). Значение этого свойства определяется с помощью опции slotAssignment при вызове Element.attachShadow().

Строка, которая может быть одной из следующих:

named

Элементы автоматически назначаются элементам <slot> внутри этого тенистого корня. Любые дочерние элементы узла-хоста с атрибутом slot, который соответствует атрибуту name элемента <slot> внутри этого тенистого корня, будут назначены этому слоту. Любые дочерние элементы узла-хоста без атрибута slot будут назначены элементу <slot> без атрибута name («слоту по умолчанию»), если он присутствует.

manual

Элементы не назначаются автоматически элементам <slot>. Вместо этого их необходимо вручную назначить с помощью HTMLSlotElement.assign().

В примере ниже метод assign() используется для отображения правильной вкладки в приложении с вкладками. Функция вызывается и получает панель для отображения, которая затем назначается слоту. Мы проверяем, что slotAssignment имеет значение named, чтобы предотвратить исключение при вызове HTMLSlotElement.assign().

function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;

  // This test is usually not needed, but can be useful when debugging
  if (shadow.slotAssignment === "named") {
    console.error(
      "Trying to manually assign a slot on an automatically-assigned (named) slot",
    );
  }
  const slot = shadow.querySelector("slot");
  const panels = elem.querySelectorAll("tab-panel");
  if (panels.length && tabIdx && tabIdx <= panels.length) {
    slot.assign(panels[tabIdx - 1]);
  } else {
    slot.assign();
  }
}

• Element.attachShadow()
• HTMLSlotElement.assign()