CustomElementRegistry.get() — Methode · JavaScript-Referenz

Signatur

CustomElementRegistry.prototype.get(name)

Beschreibung

get() wird über das globale Objekt window.customElements aufgerufen. Die Methode schlägt den übergebenen Tag-Namen in der Registry nach und gibt die Klasse zurück, die mit customElements.define() für diesen Namen registriert wurde.

Typische Anwendungsfälle:

Doppelte Registrierung vermeiden: define() wirft einen NotSupportedError, wenn ein Name schon vergeben ist. Mit get() prüft man das vorher. Das ist wichtig bei Bibliotheken, die mehrfach geladen werden können.
Elemente programmatisch erzeugen: Mit dem zurückgegebenen Konstruktor erstellt man per new eine Instanz, ohne document.createElement() zu brauchen.
Feature-Erkennung und Fehlersuche: Man kann feststellen, ob eine Komponente bereits geladen ist.

get() arbeitet synchron und liefert nur den aktuellen Zustand. Wer auf eine Definition warten will, die erst später kommt (z. B. durch Lazy Loading), verwendet customElements.whenDefined().

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Name des benutzerdefinierten Elements, z. B. `"my-button"`. Gültige Namen müssen einen Bindestrich enthalten und kleingeschrieben sein.

Rückgabewert

Typ

CustomElementConstructor | undefined

Beschreibung

Die für name registrierte Klasse oder undefined, wenn für diesen Namen noch kein Element definiert ist.

Beispiele

Doppelte Registrierung verhindern

class MyButton extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Klick mich';
  }
}

// Nur registrieren, wenn der Name noch frei ist
if (!customElements.get('my-button')) {
  customElements.define('my-button', MyButton);
}

console.log(customElements.get('my-button') === MyButton);

true

Nicht definiertes Element abfragen

const ctor = customElements.get('unbekanntes-element');
console.log(ctor);

// Tag-Namen ohne Bindestrich sind nie Custom Elements
console.log(customElements.get('div'));

undefined undefined

Instanz über den zurückgegebenen Konstruktor erzeugen

class UserCard extends HTMLElement {
  set name(value) {
    this.textContent = `Benutzer: ${value}`;
  }
}
customElements.define('user-card', UserCard);

const UserCardCtor = customElements.get('user-card');
const card = new UserCardCtor();
card.name = 'Anna';
document.body.append(card);

console.log(card instanceof UserCard, card.localName);

true "user-card"

Kombination mit whenDefined() beim Lazy Loading

const getComponent = async (tag) => {
  // Sofort zurückgeben, falls schon registriert
  const existing = customElements.get(tag);
  if (existing) return existing;
  // Sonst auf die Definition warten (löst mit dem Konstruktor auf)
  return customElements.whenDefined(tag);
};

setTimeout(() => {
  customElements.define('lazy-widget', class extends HTMLElement {});
}, 500);

const Widget = await getComponent('lazy-widget');
console.log(Widget.name || 'anonyme Klasse');

anonyme Klasse

// Wichtig · Fallstricke

Kein Fehler bei ungültigen Namen: get() gibt für ungültige Namen wie "div" oder "MyButton" einfach undefined zurück und wirft keine Ausnahme. define() dagegen wirft bei ungültigen Namen einen SyntaxError.
Groß- und Kleinschreibung: Die Namen werden exakt verglichen. get('My-Button') findet kein Element, das als 'my-button' registriert wurde.
Nur ein Blick auf den aktuellen Zustand: Wird die Definition erst später registriert, liefert ein früher Aufruf undefined. Für asynchrones Warten gibt es whenDefined().
Andere Frames: Jedes Fenster und jedes <iframe> hat seine eigene Registry. Elemente aus einem anderen Frame findet get() nicht.
Umkehrfunktion: Den Namen zu einem Konstruktor ermittelt customElements.getName(). Diese Methode ist neuer (seit 2023/2024) und in älteren Browsern nicht verfügbar.
Browser-Unterstützung: Chrome, Edge, Firefox und Safari unterstützen die Methode vollständig. Der Internet Explorer unterstützt Custom Elements nicht.

Siehe auch

CustomElementRegistry.getName() CustomElementRegistry.define() CustomElementRegistry.upgrade() CustomElementRegistry.initialize() CustomElementRegistry.whenDefined()