connectedCallback e disconnectedCallback
Eseguire codice quando un elemento personalizzato viene aggiunto o rimosso dal DOM
connectedCallback e disconnectedCallback è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Callback del ciclo di vita dell'elemento
I custom elements espongono quattro hook del ciclo di vita: connectedCallback, disconnectedCallback, attributeChangedCallback e adoptedCallback. Rispecchiano i ben noti punti di mount, unmount e aggiornamento di qualsiasi modello a componenti.
connectedCallback viene eseguito all'inserimento
connectedCallback viene eseguito ogni volta che l'elemento viene inserito nell'albero DOM. Questo è il posto giusto per leggere gli attributi, eseguire il rendering del contenuto, collegare gli event listener e avviare timer o subscription.
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";
}
}Può essere eseguito più di una volta
Se l'elemento viene rimosso e reinserito, connectedCallback viene eseguito di nuovo a ogni inserimento. L'idempotenza è importante: protegga con un flag l'inizializzazione che deve avvenire una sola volta, oppure esegua ogni volta la configurazione completa e lasci che disconnectedCallback esegua la fase di smontaggio.
disconnectedCallback viene eseguito alla rimozione
disconnectedCallback viene eseguito quando l'elemento viene rimosso dal DOM. È il momento in cui arrestare gli intervalli, interrompere le richieste fetch, rimuovere i listener a livello di document e rilasciare qualsiasi risorsa che altrimenti potrebbe causare una perdita.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Garbage collection e listener
Un elemento con un intervallo attivo, un listener su document o una Promise non risolta non verrà sottoposto a garbage collection nemmeno dopo la disconnessione. Abbini sempre ogni sottoscrizione creata in connectedCallback alla relativa pulizia in disconnectedCallback.
Riconnessione dopo lo spostamento
Spostando un elemento con parentB.appendChild(element), questo viene prima rimosso da parentA e poi inserito in parentB. Il browser esegue disconnectedCallback e poi connectedCallback. Preveda quindi una fase transitoria di smontaggio e configurazione durante gli spostamenti.
Tempistica della connessione iniziale
Per un elemento scritto direttamente nell'HTML, connectedCallback viene eseguito durante l'analisi iniziale, dopo il costruttore. A questo punto gli attributi sono già stati analizzati, quindi la lettura di this.getAttribute("name") restituisce il valore presente nel markup.
I figli potrebbero non essere ancora stati analizzati
Per un elemento con figli dichiarati nell'HTML, quando viene eseguito connectedCallback i figli potrebbero non essere ancora presenti nel DOM, perché l'analisi è ancora in corso. Usi un MutationObserver oppure legga i figli all'interno di requestAnimationFrame se deve accedere ai figli dichiarati.
adoptedCallback
adoptedCallback viene eseguito quando un elemento viene spostato in un nuovo documento, in genere tramite document.adoptNode. La maggior parte delle applicazioni non lo usa mai: è importante soprattutto per i componenti spostati tra iframe.
Abbinamento con AbortController
Un modello efficace consiste nel creare un AbortController in connectedCallback, passare { signal: this.controller.signal } a ogni addEventListener e fetch, quindi chiamare this.controller.abort() in disconnectedCallback per rimuoverli tutti in una volta.
Eviti operazioni pesanti nel costruttore
Il costruttore viene eseguito anche quando l'elemento viene creato tramite document.createElement e non viene mai inserito. Limiti il costruttore all'impostazione dei valori iniziali delle proprietà; rimandi il rendering, il recupero dei dati e l'aggiunta dei listener a connectedCallback.
Verifica delle conoscenze
Perché le sottoscrizioni e i timer dovrebbero essere configurati in connectedCallback invece che nel costruttore dell'elemento?
Riepilogo
connectedCallback (inserimento) e disconnectedCallback (rimozione) delimitano il periodo di attività dell'elemento. Configuri listener, intervalli e richieste fetch in connectedCallback; li rimuova in disconnectedCallback per evitare perdite. Entrambi possono essere eseguiti più volte: usi AbortController per una pulizia raggruppata e ordinata.
Domande Frequenti
La lezione «connectedCallback e disconnectedCallback» è gratuita?
Sì — il testo completo di «connectedCallback e disconnectedCallback» è 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 «connectedCallback e disconnectedCallback»?
Eseguire codice quando un elemento personalizzato viene aggiunto o rimosso dal DOM 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 2 di 4.
Quanto tempo richiede la lezione «connectedCallback e disconnectedCallback»?
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