Die Callbacks connectedCallback und disconnectedCallback
Führen Sie Code aus, wenn ein benutzerdefiniertes Element zum DOM hinzugefügt oder daraus entfernt wird
Die Callbacks connectedCallback und disconnectedCallback ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Lifecycle-Callbacks von Elementen
Custom Elements stellen vier Lifecycle-Hooks bereit: connectedCallback, disconnectedCallback, attributeChangedCallback und adoptedCallback. Sie entsprechen den bekannten Mount-, Unmount- und Update-Zeitpunkten jedes Komponentenmodells.
connectedCallback wird beim Einfügen ausgelöst
connectedCallback wird jedes Mal ausgeführt, wenn das Element in den DOM-Baum eingefügt wird. Dies ist der richtige Ort, um Attribute auszulesen, Inhalte zu rendern, Event-Listener anzubringen und Timer oder Subscriptions zu starten.
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}Kann mehr als einmal ausgelöst werden
Wenn das Element entfernt und wieder eingefügt wird, wird connectedCallback bei jeder Einfügung erneut aufgerufen. Idempotenz ist wichtig – schützen Sie eine Initialisierung, die nur einmal erfolgen soll, mit einem Flag, oder führen Sie jedes Mal die vollständige Einrichtung durch und lassen Sie disconnectedCallback den Abbau übernehmen.
disconnectedCallback wird beim Entfernen aufgerufen
disconnectedCallback wird ausgeführt, wenn das Element aus dem DOM entfernt wird. Hier beenden Sie Intervalle, brechen Fetches ab, entfernen Listener auf Dokumentebene und geben alle Ressourcen frei, die andernfalls ein Leak verursachen würden.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Garbage Collection und Listener
Ein Element mit einem aktiven Intervall, einem Dokument-Listener oder einem nicht aufgelösten Promise wird auch nach dem Trennen nicht von der Garbage Collection erfasst. Ordnen Sie jedem in connectedCallback erstellten Abonnement ein Aufräumen in disconnectedCallback zu.
Wiederverbindung nach dem Verschieben
Beim Verschieben eines Elements mit parentB.appendChild(element) wird es zunächst aus parentA entfernt und anschließend in parentB eingefügt. Der Browser ruft zuerst disconnectedCallback und dann connectedCallback auf. Rechnen Sie beim Verschieben mit einem vorübergehenden Abbau und einer erneuten Einrichtung.
Zeitpunkt der ersten Verbindung
Bei einem direkt in HTML geschriebenen Element wird connectedCallback während des ersten Parsens und nach dem Konstruktor aufgerufen. Die Attribute wurden zu diesem Zeitpunkt bereits geparst, daher liefert das Lesen von this.getAttribute("name") den Wert aus dem Markup.
Kinder sind möglicherweise noch nicht geparst
Bei einem Element mit in HTML deklarierten Kindern befinden sich diese möglicherweise noch nicht im DOM, wenn connectedCallback aufgerufen wird, da der Parser noch arbeitet. Verwenden Sie einen MutationObserver oder lesen Sie die Kinder innerhalb von requestAnimationFrame, wenn Sie auf deklarierte Kinder zugreifen müssen.
adoptedCallback
adoptedCallback wird aufgerufen, wenn ein Element in ein neues Dokument verschoben wird, typischerweise über document.adoptNode. Die meisten Anwendungen verwenden dies nie – relevant ist es hauptsächlich für Komponenten, die zwischen Iframes verschoben werden.
Kombination mit AbortController
Ein sauberes Muster: Erstellen Sie in connectedCallback einen AbortController, übergeben Sie { signal: this.controller.signal } an jedes addEventListener und fetch und rufen Sie in disconnectedCallback this.controller.abort() auf, um alle gleichzeitig zu entfernen.
Aufwendige Arbeiten im Konstruktor vermeiden
Der Konstruktor wird selbst dann ausgeführt, wenn das Element über document.createElement erstellt und nie eingefügt wird. Beschränken Sie den Konstruktor auf das Setzen initialer Property-Werte; verschieben Sie Rendering, Fetches und das Hinzufügen von Listenern in connectedCallback.
Wissensprüfung
Warum sollten Abonnements und Timer in connectedCallback statt im Konstruktor des Elements eingerichtet werden?
Zusammenfassung
connectedCallback (Einfügung) und disconnectedCallback (Entfernung) begrenzen die aktive Lebensdauer des Elements. Richten Sie Listener, Intervalle und Fetches in connectedCallback ein und bauen Sie sie in disconnectedCallback ab, um Leaks zu verhindern. Beide Callbacks können mehrfach aufgerufen werden – verwenden Sie AbortController für ein sauberes, gebündeltes Aufräumen.
Häufig gestellte Fragen
Ist die Lektion „Die Callbacks connectedCallback und disconnectedCallback“ kostenlos?
Ja — der vollständige Text von „Die Callbacks connectedCallback und disconnectedCallback“ 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 „Die Callbacks connectedCallback und disconnectedCallback“?
Führen Sie Code aus, wenn ein benutzerdefiniertes Element zum DOM hinzugefügt oder daraus entfernt wird 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 2 von 4.
Wie lange dauert die Lektion „Die Callbacks connectedCallback und disconnectedCallback“?
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