Beobachtete Attribute und attributeChangedCallback
Reagieren Sie in benutzerdefinierten Elementen auf Änderungen von HTML-Attributen
Beobachtete Attribute und attributeChangedCallback ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.
Auf Änderungen von Attributen reagieren
HTML-Elemente stellen ihren Zustand über Attribute bereit. Um darauf zu reagieren, wenn <my-card name="A"> zu name="B" wird, deklarieren Sie die Liste der überwachten Attribute und implementieren Sie attributeChangedCallback in der Klasse.
Statisches observedAttributes
Geben Sie über einen statischen Getter an, welche Attribute relevant sind: static get observedAttributes() { return ["name", "open"]; }. Nur Attribute in dieser Liste lösen den Callback aus – andere werden aus Performancegründen ignoriert.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Signatur des Callbacks
attributeChangedCallback(name, oldValue, newValue) wird bei jeder Änderung eines überwachten Attributs aufgerufen. Alle drei Parameter sind Strings oder null, wenn das Attribut nicht vorhanden ist. Verwenden Sie sie, um den internen Zustand zu aktualisieren und erneut zu rendern.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Wird auch für anfängliche Attribute aufgerufen
Der Callback wird einmal für jedes überwachte Attribut aufgerufen, das beim Upgraden des Elements vorhanden ist. Dadurch deckt ein Rendern in attributeChangedCallback sowohl das initiale als auch alle nachfolgenden Rendern ab, ohne einen separaten Pfad in connectedCallback zu benötigen.
Property-Attribut-Reflexion
Bei booleschen Attributen sollten Sie die Property auf das Attribut und umgekehrt abbilden: Das Setzen von element.open = true sollte das open-Attribut setzen, und das Entfernen des Attributs sollte die Property zurücksetzen. Dies entspricht dem Verhalten integrierter Elemente wie <details>.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Endlosschleifen vermeiden
Wenn attributeChangedCallback Attribute setzt, die es selbst beobachtet, kann eine Endlosschleife entstehen. Sichern Sie den Callback am Anfang immer mit if (oldValue === newValue) return; ab und vermeiden Sie es, überwachte Attribute innerhalb des Callbacks zu ändern.
Boolesche Attribute
Gemäß HTML-Konvention werden boolesche Attribute durch ihre Existenz „gesetzt“ (disabled, open) und durch ihr Fehlen „nicht gesetzt“. Ihr Wert wird ignoriert – disabled="false" bedeutet weiterhin, dass das Element deaktiviert ist. Prüfen Sie die Existenz mit hasAttribute und vergleichen Sie niemals den String.
JSON in Attributen
Attribute sind Strings. Um strukturierte Daten zu übergeben, verwenden Sie JSON.stringify im Markup und parsen Sie sie in attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Bei großen Nutzdaten sollten Sie die Übergabe über eine JS-Property-Zuweisung bevorzugen.
Im Vergleich zu MutationObserver
Sie könnten Attributänderungen mit einem MutationObserver beobachten, aber observedAttributes + attributeChangedCallback ist schneller (kein Observer-Setup), deklarativ (die Liste der überwachten Namen ist in der Klasse sichtbar) und für Web Components idiomatisch.
Performance: Rendern zusammenfassen
Mehrere Attribute, die sich schnell nacheinander ändern, würden mehrere Callbacks und mehrere Render-Vorgänge auslösen. Fassen Sie sie mit queueMicrotask oder requestAnimationFrame zusammen, sodass das eigentliche Rendern unabhängig von der Anzahl der Änderungen einmal pro Microtask beziehungsweise Frame ausgeführt wird.
Häufiger Fehler
Wenn Sie ein Attribut nicht zu observedAttributes hinzufügen, wird der Callback für dieses Attribut stillschweigend deaktiviert. Wenn Ihre Komponente nicht auf einen setAttribute-Aufruf reagiert, sollten Sie als Erstes die statische observedAttributes-Liste überprüfen.
Wissensprüfung
Was geschieht, wenn Sie attributeChangedCallback indirekt aufrufen, indem Sie innerhalb des Callbacks ein überwachtes Attribut setzen?
Zusammenfassung
Geben Sie über den statischen observedAttributes-Getter an, welche Attribute überwacht werden sollen; attributeChangedCallback(name, oldValue, newValue) wird bei jeder Änderung einschließlich des initialen Parsens aufgerufen. Spiegeln Sie bei booleschem Zustand Properties auf Attribute, verhindern Sie Endlosschleifen und fassen Sie Render-Vorgänge aus Performancegründen mit requestAnimationFrame zusammen.
Häufig gestellte Fragen
Ist die Lektion „Beobachtete Attribute und attributeChangedCallback“ kostenlos?
Ja — der vollständige Text von „Beobachtete Attribute und attributeChangedCallback“ 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 „Beobachtete Attribute und attributeChangedCallback“?
Reagieren Sie in benutzerdefinierten Elementen auf Änderungen von HTML-Attributen 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 3 von 4.
Wie lange dauert die Lektion „Beobachtete Attribute und attributeChangedCallback“?
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