CustomElementRegistry: метод whenDefined()

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Метод whenDefined() интерфейса CustomElementRegistry возвращает Promise, который разрешается, когда элемент с указанным именем определён.

Синтаксис

whenDefined(name)

Параметры

name: Имя пользовательского элемента.

Возвращаемое значение

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

Обещание отклоняется с SyntaxError DOMException, если имя не является валидным именем пользовательского элемента.

Примеры

В этом примере используется whenDefined() для обнаружения момента определения пользовательских элементов, составляющих меню. Меню отображает содержимое-заполнитель, пока фактическое содержимое меню не будет готово для отображения.

<nav id="menu-container">
  <div class="menu-placeholder">Loading…</div>
  <nav-menu>
    <menu-item>Item 1</menu-item>
    <menu-item>Item 2</menu-item>
    …
    <menu-item>Item N</menu-item>
  </nav-menu>
</nav>

const container = document.getElementById("menu-container");
const placeholder = container.querySelector(".menu-placeholder");
// Fetch all the children of menu that are not yet defined.
const undefinedElements = container.querySelectorAll(":not(:defined)");

async function removePlaceholder() {
  // Filter the elements down to unique localNames
  const tags = new Set(
    [...undefinedElements].map((button) => button.localName),
  );
  const promises = [...tags].map((tag) => customElements.whenDefined(tag));

  // Wait for all the children to be upgraded
  await Promise.all(promises);
  // then remove the placeholder
  container.removeChild(placeholder);
}

removePlaceholder();

Спецификации

Спецификация
HTML # dom-customelementregistry-whendefined-dev

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`whenDefined`	54	79	63	41	10.1	54	63	41	10.3	6.0	54

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined