Observerede attributter og attributeChangedCallback
Reagér på ændringer i HTML-attributter i tilpassede elementer
Observerede attributter og attributeChangedCallback er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Reaktion på attributændringer
HTML-elementer giver adgang til tilstand via attributter. Hvis du vil reagere, når <my-card name="A"> bliver til name="B", skal du angive listen over observerede attributter og implementere attributeChangedCallback på klassen.
Statisk observedAttributes
Angiv, hvilke attributter du vil holde øje med, via en statisk getter: static get observedAttributes() { return ["name", "open"]; }. Kun attributter på denne liste udløser callbacken — andre ignoreres af hensyn til ydeevnen.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Callbackens signatur
attributeChangedCallback(name, oldValue, newValue) udløses ved hver ændring af en observeret attribut. Alle tre parametre er strenge (eller null, hvis attributten mangler). Brug dem til at opdatere intern tilstand og gengive elementet igen.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Udløses for oprindelige attributter
Callbacken udløses én gang for hver observeret attribut, der er til stede, når elementet opgraderes. Det betyder, at en gengivelse i attributeChangedCallback håndterer både den første og efterfølgende gengivelser uden en separat sti i connectedCallback.
Spejling mellem egenskab og attribut
For booleske attributter skal du spejle egenskaben til attributten og omvendt: indstilling af element.open = true skal sætte open-attributten, og fjernelse af attributten skal nulstille egenskaben. Det svarer til den måde, indbyggede elementer som <details> fungerer på.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Undgå uendelige løkker
Hvis attributeChangedCallback sætter attributter, som den selv observerer, kan du ende i en uendelig løkke. Beskyt altid callbacken med if (oldValue === newValue) return; øverst, og undgå at ændre observerede attributter inde i den.
Booleske attributter
Ifølge HTML-konventionen er booleske attributter "sat", når de findes (disabled, open), og "ikke sat", når de mangler. Deres værdi ignoreres — disabled="false" betyder stadig, at elementet er deaktiveret. Kontrollér, om attributten findes, med hasAttribute; sammenlign aldrig strengen.
JSON i attributter
Attributter er strenge. Hvis du vil videregive strukturerede data, skal du bruge JSON.stringify i markup og fortolke resultatet i attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Ved store datamængder bør du i stedet videregive data via en JS-egenskabstildeling.
Sammenlignet med MutationObserver
Du kan overvåge attributændringer med en MutationObserver, men observedAttributes + attributeChangedCallback er hurtigere (ingen opsætning af en observer), deklarativt (listen over observerede navne er synlig på klassen) og idiomatisk for webkomponenter.
Ydeevne: Saml gengivelser
Flere attributter, der ændres hurtigt efter hinanden, udløser flere callbacks og flere gengivelser. Saml dem med queueMicrotask eller requestAnimationFrame, så den faktiske gengivelse kun kører én gang pr. mikrotask eller frame, uanset hvor mange attributter der blev ændret.
Almindelig faldgrube
Hvis du glemmer at tilføje en attribut til observedAttributes, deaktiveres callbacken lydløst for den attribut. Hvis din komponent ikke reagerer på et kald til setAttribute, er det første, du bør kontrollere, den statiske observedAttributes-liste.
Videnstjek
Hvad sker der, hvis du indirekte kalder attributeChangedCallback ved at sætte en observeret attribut inde i callbacken?
Opsummering
Angiv, hvilke attributter der skal spores, via den statiske observedAttributes-getter; attributeChangedCallback(name, oldValue, newValue) udløses ved hver ændring, inklusive den første fortolkning. Spejl egenskaber til attributter for boolesk tilstand, beskyt mod uendelige løkker, og saml gengivelser med requestAnimationFrame for bedre ydeevne.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Observerede attributter og attributeChangedCallback” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Observerede attributter og attributeChangedCallback”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Observerede attributter og attributeChangedCallback”?
Reagér på ændringer i HTML-attributter i tilpassede elementer Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Observerede attributter og attributeChangedCallback”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Definition af elementer med customElements.define
- connectedCallback og disconnectedCallback
- Observerede attributter og attributeChangedCallback
- Udvidelse af indbyggede elementer