Attributi osservati e attributeChangedCallback
Reagire alle modifiche degli attributi HTML negli elementi personalizzati
Attributi osservati e attributeChangedCallback è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Reagire alle modifiche degli attributi
Gli elementi HTML espongono lo stato tramite gli attributi. Per reagire quando <my-card name="A"> diventa name="B", dichiari l'elenco degli attributi osservati e implementi attributeChangedCallback nella classe.
Getter statico observedAttributes
Dichiari gli attributi di interesse tramite un getter statico: static get observedAttributes() { return ["name", "open"]; }. Solo gli attributi presenti in questo elenco attivano il callback; gli altri vengono ignorati per motivi di prestazioni.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}La firma del callback
attributeChangedCallback(name, oldValue, newValue) viene eseguito per ogni modifica a un attributo osservato. Tutti e tre i parametri sono stringhe, oppure null se l'attributo è assente. Li usi per aggiornare lo stato interno e ripetere il rendering.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Viene eseguito per gli attributi iniziali
Il callback viene eseguito una volta per ogni attributo osservato presente quando l'elemento viene aggiornato. Di conseguenza, un rendering in attributeChangedCallback gestisce sia il rendering iniziale sia quelli successivi, senza un percorso separato in connectedCallback.
Riflessione tra proprietà e attributi
Per gli attributi booleani, rispecchi la proprietà nell'attributo e viceversa: l'impostazione di element.open = true dovrebbe impostare l'attributo open, mentre la rimozione dell'attributo dovrebbe azzerare la proprietà. Questo corrisponde al comportamento degli elementi integrati come <details>.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Eviti i cicli infiniti
Se attributeChangedCallback imposta attributi che osserva, può entrare in un ciclo infinito. Inserisca sempre if (oldValue === newValue) return; all'inizio del callback ed eviti di modificare al suo interno gli attributi osservati.
Attributi booleani
Per convenzione HTML, gli attributi booleani sono "impostati" quando sono presenti (disabled, open) e "non impostati" quando sono assenti. Il loro valore viene ignorato: disabled="false" indica comunque che l'elemento è disabilitato. Ne verifichi la presenza con hasAttribute, senza mai confrontare la stringa.
JSON negli attributi
Gli attributi sono stringhe. Per passare dati strutturati, usi JSON.stringify nel markup e analizzi il risultato in attributeChangedCallback: <my-chart data-points='[1,2,3]'>. Per payload di grandi dimensioni, preferisca invece passare i dati tramite assegnazione a una proprietà JS.
Rispetto a MutationObserver
Potrebbe osservare le modifiche agli attributi con un MutationObserver, ma observedAttributes e attributeChangedCallback sono più veloci, perché non richiedono la configurazione di un Observer, sono dichiarativi, poiché l'elenco dei nomi osservati è visibile nella classe, e rappresentano l'approccio idiomatico per i web component.
Prestazioni: accorpare i rendering
Diversi attributi modificati in rapida successione attiverebbero diversi callback e diversi rendering. Accorpi le operazioni con queueMicrotask o requestAnimationFrame, in modo che il rendering effettivo venga eseguito una sola volta per microtask o frame, indipendentemente dal numero di attributi modificati.
Errore comune
Dimenticare di aggiungere un attributo a observedAttributes disattiva silenziosamente il callback per quell'attributo. Se il componente non reagisce a una chiamata a setAttribute, la prima cosa da controllare è l'elenco statico observedAttributes.
Verifica delle conoscenze
Cosa succede se richiama indirettamente attributeChangedCallback impostando un attributo osservato all'interno del callback?
Riepilogo
Dichiari gli attributi da monitorare tramite il getter statico observedAttributes; attributeChangedCallback(name, oldValue, newValue) viene eseguito per ogni modifica, inclusa l'analisi iniziale. Rispecchi le proprietà negli attributi per lo stato booleano, eviti i cicli infiniti e accorpi i rendering con requestAnimationFrame per migliorare le prestazioni.
Domande Frequenti
La lezione «Attributi osservati e attributeChangedCallback» è gratuita?
Sì — il testo completo di «Attributi osservati e attributeChangedCallback» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Attributi osservati e attributeChangedCallback»?
Reagire alle modifiche degli attributi HTML negli elementi personalizzati Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Attributi osservati e attributeChangedCallback»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Definire elementi con customElements.define
- connectedCallback e disconnectedCallback
- Attributi osservati e attributeChangedCallback
- Estendere gli elementi integrati