JavaScript Academy · Lektion

Benutzerdefinierte Elemente definieren

Registrieren Sie Elemente mit der customElements-API.

Benutzerdefinierte Elemente definieren ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Custom Elements?

Mit Custom Elements können Sie eigene HTML-Tags definieren, die von JavaScript-Klassen unterstützt werden. Anstatt eine unübersichtliche Sammlung aus div-Elementen zusammenzusetzen, erstellen Sie eine wiederverwendbare, in sich geschlossene Komponente wie <user-card>.

Sie sind Teil des Web Components-Standards.
Sie funktionieren nativ im Browser und benötigen kein Framework.
Der Name eines Custom Elements muss einen Bindestrich enthalten (z. B. my-button).

Die customElements-Registry

Der Browser stellt unter window.customElements eine globale Registry bereit. Registrieren Sie ein neues Tag, indem Sie customElements.define(name, constructor) aufrufen.

Nach der Registrierung wird jedes passende Tag im Dokument zu einer Instanz Ihrer Klasse aufgewertet.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElement erweitern

Ein Custom Element ist eine Klasse, die extends HTMLElement verwendet. Die Basisklasse stattet Ihr Element mit allen standardmäßigen DOM-Funktionen aus, darunter Attribute, Ereignisse und Styling.

Rufen Sie im Konstruktor immer zuerst super() auf, damit das Element ordnungsgemäß initialisiert wird.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Inhalt rendern

Innerhalb des Elements können Sie this.innerHTML setzen oder DOM-Methoden verwenden, um den Inhalt zu erstellen. Häufig wird der Inhalt gerendert, sobald das Element mit der Seite verbunden ist.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Das Element in HTML verwenden

Nach der Registrierung verwenden Sie Ihr Tag wie jedes integrierte Element. Sie können es direkt im Markup platzieren oder mit document.createElement erstellen.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Regeln für den Konstruktor

Der Konstruktor wird ausgeführt, wenn eine Instanz erstellt wird. Dabei gelten strenge Regeln:

Rufen Sie zuerst super() auf.
Untersuchen oder fügen Sie hier keine Attribute oder untergeordneten Elemente hinzu.
Verschieben Sie DOM-Arbeiten in connectedCallback.

Verwenden Sie den Konstruktor nur für den Anfangszustand und zum Einrichten von Event-Listenern.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Verhalten hinzufügen

Da Ihr Element ein echter DOM-Knoten ist, können Sie Event-Listener daran anfügen und seinen Inhalt als Reaktion auf Interaktionen aktualisieren.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Die Bindestrichpflicht

Namen benutzerdefinierter Elemente müssen einen Bindestrich enthalten. Dadurch ist sichergestellt, dass sie niemals mit aktuellen oder zukünftigen integrierten HTML-Elementen kollidieren.

my-widget ist gültig.
mywidget ist ungültig und löst einen Fehler aus.
Namen unterscheiden nicht zwischen Groß- und Kleinschreibung, werden aber in Kleinbuchstaben geschrieben.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined und get

Zwei nützliche Methoden der Registrierung:

customElements.get(name) gibt den Konstruktor zurück oder undefined, wenn das Element nicht registriert ist.
customElements.whenDefined(name) gibt ein Promise zurück, das aufgelöst wird, sobald das Element definiert ist.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Nur einmal definieren

Jeder Name kann nur einmal registriert werden. Der Aufruf von define mit einem bereits verwendeten Namen löst einen Fehler aus. Sichern Sie sich in gemeinsam genutzten Modulen gegen eine doppelte Registrierung ab.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Warum benutzerdefinierte Elemente wichtig sind

Benutzerdefinierte Elemente bieten frameworkunabhängige, gekapselte und wiederverwendbare UI. Sie:

Standardisieren die Wiederverwendung von Komponenten unabhängig vom verwendeten Stack.
Integrieren sich in den eigenen Lebenszyklus des Browsers.
Ergänzen sich auf natürliche Weise mit Shadow DOM und Templates, die später behandelt werden.

Kurzer Test

Testen Sie Ihr Verständnis für die Definition benutzerdefinierter Elemente.

Zusammenfassung

Sie haben gelernt, wie Sie benutzerdefinierte Elemente definieren:

customElements.define(name, class) registriert ein Tag.
Die Klasse extends HTMLElement und ruft zuerst super() auf.
Namen müssen einen Bindestrich enthalten.
Rendern Sie Inhalte in connectedCallback, nicht im Konstruktor.
get und whenDefined helfen Ihnen, den Registrierungsstatus zu prüfen.

Als Nächstes untersuchen wir den vollständigen Lebenszyklus eines benutzerdefinierten Elements.

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefinierte Elemente definieren“ kostenlos?

Ja — der vollständige Text von „Benutzerdefinierte Elemente definieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Benutzerdefinierte Elemente definieren“?

Registrieren Sie Elemente mit der customElements-API. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Benutzerdefinierte Elemente definieren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy