Elemente mit customElements.define definieren
Registrieren Sie eine Klasse für ein benutzerdefiniertes Element im Browser
Elemente mit customElements.define definieren ist eine kostenlose HTML 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 HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Custom Elements?
Mit Custom Elements können Sie eigene HTML-Tags erstellen, die von einer JavaScript-Klasse unterstützt werden. Nach der Definition verhält sich <my-card> wie jedes integrierte Element: Es kann in HTML geschrieben, abgefragt, formatiert, per Skript gesteuert und unverändert in Frameworks verwendet werden.
Die Bindestrich-Anforderung
Jeder Name eines Custom Elements muss mindestens einen Bindestrich enthalten — user-avatar, app-button, my-card. Der Bindestrich unterscheidet Custom Elements von aktuellen und zukünftigen integrierten HTML-Tags und ist in der Spezifikation vorgeschrieben.
Eine Klasse definieren
Ein Custom Element ist eine Klasse, die HTMLElement (oder eine integrierte Unterklasse) erweitert. Die Klasse kann einen Konstruktor und Lifecycle-Callbacks deklarieren. Öffentliche Eigenschaften und Methoden der Klasse werden zur Skript-Schnittstelle des Elements.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Mit define registrieren
customElements.define("my-card", MyCard) registriert die Klasse unter dem Tag-Namen. Nach der Registrierung wird jedes bereits vorhandene und jedes zukünftige <my-card> im Dokument zu einer Instanz der Klasse aufgewertet.
super() ist obligatorisch
Der Konstruktor muss als erste Anweisung super() aufrufen, bevor auf this zugegriffen wird. Wird super() übersprungen, wird "Failed to construct 'HTMLElement'" ausgelöst. Behandeln Sie dies als die Standardregel für JavaScript-Konstruktoren von Klassen.
Keine DOM-Lesezugriffe im Konstruktor
Der Konstruktor darf die Attribute oder untergeordneten Elemente des Elements nicht auslesen — sie sind zum Zeitpunkt der Konstruktion möglicherweise noch nicht geparst. Verschieben Sie DOM-bezogene Einrichtung in connectedCallback. Dieser wird erst ausgelöst, wenn sich das Element im Dokument befindet.
Die Registrierung ist dauerhaft
Ein Elementname kann pro Seite nur einmal registriert werden. Eine erneute Definition desselben Namens löst einen NotSupportedError aus. Laden Sie die Seite neu, um Änderungen während der Entwicklung zu testen. In der Produktion registrieren Sie jede Komponente einmal beim Start.
Polyfills
Custom Elements werden von jedem modernen Browser unterstützt. Für sehr alte Browser (die größtenteils nicht mehr verwendet werden) stellt das webcomponents.js-Polyfill einen Fallback bereit. Neue Projekte können die native Unterstützung verwenden und vollständig auf das Polyfill verzichten.
Den Definitionsstatus ermitteln
customElements.get("my-card") gibt die Klasse zurück, wenn sie definiert ist, andernfalls undefined. customElements.whenDefined("my-card") gibt ein Promise zurück, das aufgelöst wird, sobald das Element registriert ist — nützlich für Code, der auf spät geladene Definitionen warten muss.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Das Element verwenden
Nach der Definition verwenden Sie das Element genau wie ein integriertes Tag: Schreiben Sie es in HTML (<my-card></my-card>), erstellen Sie es mit document.createElement("my-card") oder instanziieren Sie es mit new MyCard() und fügen Sie es ein. Alle drei Wege erzeugen dieselbe aufgewertete Instanz.
Namenskonventionen
Stellen Sie Custom Elements den Namen eines Projekts oder Unternehmens voran (cd-card, app-modal), um Kollisionen mit anderen Bibliotheken auf derselben Seite zu vermeiden. Das Web-Component-Ökosystem ist ungebündelt: Jeder auf Ihrer Seite kann jeden Namen registrieren, und die erste Registrierung gewinnt.
Wissenscheck
Warum muss jeder Name eines Custom Elements einen Bindestrich enthalten?
Zusammenfassung
Custom Elements sind JavaScript-Klassen, die HTMLElement erweitern und über customElements.define("name", Class) registriert werden. Der Name muss einen Bindestrich enthalten. Der Konstruktor muss zuerst super() aufrufen und darf das DOM nicht auslesen. Verschieben Sie DOM-Arbeiten in connectedCallback. Definierte Elemente verhalten sich überall genau wie integrierte Tags.
Häufig gestellte Fragen
Ist die Lektion „Elemente mit customElements.define definieren“ kostenlos?
Ja — der vollständige Text von „Elemente mit customElements.define 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 HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Elemente mit customElements.define definieren“?
Registrieren Sie eine Klasse für ein benutzerdefiniertes Element im Browser Du übst HTML 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 HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML 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 „Elemente mit customElements.define 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 HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML 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
- Elemente mit customElements.define definieren
- Die Callbacks connectedCallback und disconnectedCallback
- Beobachtete Attribute und attributeChangedCallback
- Integrierte Elemente erweitern