Web API Cookbook

Capitolo 12. Componenti web

Questo lavoro è stato tradotto utilizzando l'AI. Siamo lieti di ricevere il tuo feedback e i tuoi commenti: [e-mail]

Introduzione

I componenti di Web sono un modo per costruire nuovi elementi HTML con un proprio comportamento. Questo comportamento è incapsulato in un elemento personalizzato.

Creare un componente

Puoi creare un componente web definendo una classe che estende HTMLElement, come mostrato nell'Esempio 12-1.

Esempio 12-1. Un componente web essenziale

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from MyComponent';
  }
}

Quando aggiungi l'elemento personalizzato al DOM, il browser chiama il metodo connectedCallback. In genere è qui che risiede la maggior parte della logica del tuo componente. Questo è uno dei callback del ciclo di vita. Altri callback del ciclo di vita sono:

disconnectedCallback

Richiamato quando si rimuove l'elemento personalizzato dal DOM. Questo è un buon posto per fare pulizia, ad esempio per rimuovere gli ascoltatori di eventi.

attributeChangedCallback

Richiamato quando si modifica uno degli attributi guardati dell'elemento.

Registrazione di un elemento personalizzato

Una volta creata la tua classe di elementi personalizzati, devi registrarla con il browser prima di utilizzarla in un documento HTML. Puoi registrare il tuo elemento personalizzato chiamando define sull'oggetto globale customElements, come mostrato nell'Esempio 12-2.

Esempio 12-2. ...