JavaScript Academy · Lezione

Definire Custom Elements

Registri elementi con l'API customElements.

Definire Custom Elements è una lezione JavaScript 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cosa sono gli elementi personalizzati?

Gli elementi personalizzati consentono di definire i propri tag HTML supportati da classi JavaScript. Invece di assemblare una zuppa di div, può creare un componente riutilizzabile e autonomo come <user-card>.

Fanno parte dello standard Web Components.
Funzionano nativamente nei browser, senza richiedere framework.
Il nome di un elemento personalizzato deve contenere un trattino (ad esempio my-button).

Il registro customElements

Il browser espone un registro globale all'indirizzo window.customElements. Per registrare un nuovo tag, chiami customElements.define(name, constructor).

Una volta definito, ogni tag corrispondente nel documento viene trasformato in un'istanza della classe.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Estensione di HTMLElement

Un elemento personalizzato è una classe che extends HTMLElement. La classe di base fornisce all'elemento tutte le funzionalità DOM standard, come attributi, eventi e stili.

Chiami sempre super() per primo nel costruttore, affinché l'elemento venga inizializzato correttamente.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Rendering del contenuto

All'interno dell'elemento può impostare this.innerHTML o usare i metodi DOM per creare il contenuto. Un approccio comune consiste nel renderizzare il contenuto quando l'elemento viene collegato alla pagina.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Utilizzo dell'elemento in HTML

Dopo la registrazione, utilizzi il tag proprio come qualsiasi elemento integrato. Può inserirlo direttamente nel markup o crearlo con document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Regole del costruttore

Il costruttore viene eseguito quando viene creata un'istanza. Esistono regole precise:

Chiami prima super().
Non esamini né aggiunga attributi o elementi figli in questo punto.
Rimandi le operazioni sul DOM a connectedCallback.

Utilizzi il costruttore solo per lo stato iniziale e la configurazione dei listener degli eventi.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Aggiunta del comportamento

Poiché il Suo elemento è un vero nodo DOM, può associarvi listener di eventi e aggiornarne il contenuto in risposta alle interazioni.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Il requisito del trattino

I nomi degli elementi personalizzati devono contenere un trattino. Questo garantisce che non entrino mai in conflitto con gli elementi HTML integrati presenti o futuri.

my-widget è valido.
mywidget non è valido e genera un errore.
I nomi non distinguono tra maiuscole e minuscole, ma vengono scritti in minuscolo.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined e get

Due metodi utili del registro:

customElements.get(name) restituisce il costruttore oppure undefined se l'elemento non è registrato.
customElements.whenDefined(name) restituisce una Promise che si risolve quando l'elemento viene definito.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Definizione una sola volta

Ogni nome può essere registrato una sola volta. La chiamata a define con un nome già utilizzato genera un errore. Nei moduli condivisi, gestisca il rischio di una doppia registrazione.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Perché gli elementi personalizzati sono importanti

Gli elementi personalizzati offrono un'interfaccia utente incapsulata, riutilizzabile e indipendente dai framework. Consentono di:

Standardizzare il riutilizzo dei componenti in qualsiasi stack.
Integrarsi con il ciclo di vita del browser.
Abbinarsi naturalmente a Shadow DOM e template, trattati più avanti.

Verifica rapida

Verifichi la Sua comprensione della definizione degli elementi personalizzati.

Riepilogo

Ha imparato a definire gli elementi personalizzati:

customElements.define(name, class) registra un tag.
La classe extends HTMLElement e chiama prima super().
I nomi devono contenere un trattino.
Esegua il rendering del contenuto in connectedCallback, non nel costruttore.
get e whenDefined aiutano a verificare lo stato della registrazione.

Ora esploreremo il ciclo di vita completo di un elemento personalizzato.

Domande Frequenti

La lezione «Definire Custom Elements» è gratuita?

Sì — il testo completo di «Definire Custom Elements» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Definire Custom Elements»?

Registri elementi con l'API customElements. Eserciti JavaScript 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 JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript 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 Custom Elements»?

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 JavaScript Academy?

Sì. Ogni lezione JavaScript 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

← Torna a JavaScript Academy