CustomElementRegistry: whenDefined() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die whenDefined() Methode der CustomElementRegistry Schnittstelle gibt ein Promise zurück, das aufgelöst wird, wenn das benannte Element definiert ist.

Syntax

whenDefined(name)

Parameter

name: Der Name des benutzerdefinierten Elements.

Ein Promise, das mit dem Konstruktor des benutzerdefinierten Elements erfüllt wird, wenn ein benutzerdefiniertes Element mit dem angegebenen Namen definiert ist. Wenn ein benutzerdefiniertes Element bereits mit dem Namen definiert wurde, wird das Promise sofort erfüllt.

Das Promise wird mit einem SyntaxError DOMException abgelehnt, wenn der Name kein gültiger Name für ein benutzerdefiniertes Element ist.

Beispiele

Dieses Beispiel verwendet whenDefined(), um zu erkennen, wann die benutzerdefinierten Elemente, die ein Menü bilden, definiert sind. Das Menü zeigt Platzhalterinhalte an, bis der tatsächliche Menüinhalt bereit ist, angezeigt zu werden.

html

<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();

Spezifikationen

Specification
HTML Standard # dom-customelementregistry-whendefined-dev

Browser-Kompatibilität

BCD tables only load in the browser