Definire elementi con customElements.define
Registrare una classe di elemento personalizzato nel browser
Definire elementi con customElements.define è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cosa sono i custom elements?
I custom elements permettono di creare tag HTML personalizzati supportati da una classe JavaScript. Dopo la definizione, <my-card> si comporta come qualsiasi elemento integrato: può essere scritto in HTML, cercato, stilizzato, gestito tramite script e utilizzato nei framework senza modifiche.
Il requisito del trattino
Ogni nome di custom element deve contenere almeno un trattino: user-avatar, app-button, my-card. Il trattino distingue i custom elements dai tag HTML integrati attuali e futuri ed è imposto dalla specifica.
Definire una classe
Un custom element è una classe che estende HTMLElement (o una sottoclasse di un elemento integrato). La classe può dichiarare un costruttore e callback del ciclo di vita. Le proprietà e i metodi pubblici della classe diventano l'interfaccia di scripting dell'elemento.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Registrare con define
customElements.define("my-card", MyCard) registra la classe con il nome del tag. Dopo la registrazione, ogni <my-card> già presente o aggiunto in futuro al documento viene trasformato in un'istanza della classe.
super() è obbligatorio
Il costruttore deve chiamare super() come prima istruzione, prima di accedere a this. Saltare super() genera l'errore "Failed to construct 'HTMLElement'". Lo consideri la normale regola dei costruttori delle classi JavaScript.
Nessuna lettura del DOM nel costruttore
Il costruttore non può leggere gli attributi o i figli dell'elemento, perché al momento della costruzione potrebbero non essere ancora stati analizzati. Sposti la configurazione che interagisce con il DOM in connectedCallback, che viene eseguito solo dopo l'inserimento dell'elemento nel documento.
La registrazione è permanente
Un nome di elemento può essere registrato una sola volta per pagina. Ridefinire lo stesso nome genera un NotSupportedError. Ricarichi la pagina per testare le modifiche durante lo sviluppo; in produzione, registri ogni componente una sola volta all'avvio.
Polyfill
I custom elements sono disponibili in tutti i browser moderni. Per i browser molto vecchi (ormai quasi del tutto dismessi), il polyfill webcomponents.js fornisce un fallback. Nei progetti nuovi può utilizzare l'implementazione nativa e omettere completamente il polyfill.
Rilevare lo stato della definizione
customElements.get("my-card") restituisce la classe se è stata definita, altrimenti restituisce undefined. customElements.whenDefined("my-card") restituisce una promise che si risolve quando l'elemento viene registrato: è utile per il codice che deve attendere definizioni caricate in ritardo.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Utilizzare l'elemento
Una volta definito, utilizzi l'elemento esattamente come un tag integrato: lo scriva in HTML (<my-card></my-card>), lo crei tramite document.createElement("my-card") oppure lo istanzi tramite new MyCard() e lo inserisca. Tutti e tre i percorsi producono la stessa istanza aggiornata.
Convenzioni di denominazione
Preceda i custom elements con il nome del progetto o dell'azienda (cd-card, app-modal) per evitare collisioni con altre librerie presenti nella stessa pagina. L'ecosistema dei web component non è unbundled: chiunque si trovi nella pagina può registrare qualsiasi nome e la prima registrazione ha la precedenza.
Verifica delle conoscenze
Perché ogni nome di custom element deve contenere un trattino?
Riepilogo
I custom elements sono classi JavaScript che estendono HTMLElement e vengono registrati tramite customElements.define("name", Class), dove il nome deve contenere un trattino. Il costruttore deve chiamare super() per primo e non deve leggere il DOM; rimandi il lavoro sul DOM a connectedCallback. Gli elementi definiti si comportano esattamente come i tag integrati in ogni contesto.
Domande Frequenti
La lezione «Definire elementi con customElements.define» è gratuita?
Sì — il testo completo di «Definire elementi con customElements.define» è 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 «Definire elementi con customElements.define»?
Registrare una classe di elemento personalizzato nel browser 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 1 di 4.
Quanto tempo richiede la lezione «Definire elementi con customElements.define»?
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