Dopo aver visto come includere un Web component nelle nostre applicazioni, iniziamo ad esplorare le modalità con cui possiamo crearne uno tutto nostro. Man mano che costruiremo il nostro Web component impareremo le linee guida generali e comprenderemo le caratteristiche delle tre funzionalità principali che stanno alla base di questa tecnologia: custom element, template e shadow DOM.

Il componente che andremo ad implementare è uno di quegli elementi grafici che consente di dare una valutazione ad un articolo, un libro o un qualsiasi prodotto indicando un voto su un massimo predefinito. Questo elemento viene graficamente rappresentato in diversi modi. Noi lo rappresentermo come una sequenza di stelle, come mostrato dall’immagine seguente:

Creare un custom element

Iniziamo a creare la struttura di base del nostro componente creando un file rating.js ed inserendo al suo interno il seguente codice JavaScript: 


class MyRating extends HTMLElement {
    constructor() {
        super();
    }
}
customElements.define("my-rating", MyRating);

Questo codice ci consente di porre le basi nella creazione di quello che è chiamato un custom element, cioè un elemento HTML personalizzato. Come possiamo vedere, si tratta di una normale classe JavaScript, che abbiamo chiamato MyRating, che estende la classe HTMLElement. L’unica cosa che fa la classe è chiamare la classe base tramite il metodo super().

L’altra cosa fondamentale che troviamo nel codice mostrato sopra è la registrazione della classe appena definita nell’elenco dei custom element della pagina corrente, tramite il metodo define() di customElements. Come possiamo vedere, i parametri passati al metodo define() sono una stringa (che definisce il nome dell’elemento) e la classe che implementa l’elemento. Requisito fondamentale perché il nome da assegnare ad un custom element sia valido è che contenga un trattino al suo interno, come nel nostro esempio. Un nome che non contiene il trattino non verrà considerato valido dai browser.

Una volta definito il componente, possiamo utilizzarlo in una pagina HTML come mostrato dal seguente esempio: 


<!DOCTYPE html>
<html>
   <head>
      <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
      <script src="myRating.js"></script>
   </head>
   <body>
      <my-rating></my-rating>
   </body>
</html>

Come possiamo vedere, abbiamo inserito nella sezione <head> della pagina il riferimento allo script del loader dei polyfill ed alla definizione del nostro componente. Nel corpo della pagina abbiamo utilizzato il nostro componente come un normale elemento HTML. Facciamo notare che non è possibile utilizzare per i custom element la notazione per gli elementi vuoti. In altre parole, non possiamo inserire il nostro componente nel corpo della pagina come <my-rating />.

Naturalmente il componente che abbiamo creato fin qui non mostra assolutamente nulla nella pagina HTML. Apportiamo quindi qualche modifica al codice JavaScript come mostrato dal seguente esempio: 


class MyRating extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {
        this.innerText = "Eccomi!";
    }
}
customElements.define("my-rating", MyRating);

Abbiamo aggiunto il metodo connectedCallback() che viene automaticamente invocato quando una istanza dell’elemento viene inserita nel DOM. Questo metodo fa parte di un insieme di callback, dette anche custom element reactions, che vengono automaticamente chiamate in corrispondenza di determinate fasi del ciclo di vita di un componente. Di seguito riportiamo l’elenco delle reazioni previste per un componente:

  • constructor()
    Anche se questa non è una vera e propria custom element reaction, è importante comprendere che il suo codice viene eseguito quando un’istanza del componente viene creata; in questa fase è possibile effettuare inizializzazioni di stato o assegnazioni di gestori di evento; non è però possibile fare riferimento al DOM
  • connectedCallback()
    Questo metodo viene invocato ogni volta che un’istanza del componente viene inserito nel DOM; in questa fase è possibile eseguire operazioni di setup come ad esempio la modifica del DOM
  • disconnectedCallback()
    Il metodo viene invocato quando il componente viene rimosso dal DOM
  • attributeChangedCallback()
    Viene eseguito quando un attributo associato al componente viene modificato; come vedremo in seguito, solo gli attributi osservati generano l’invocazione di questo metodo
  • adoptedCallback()
    Questo metodo viene invocato quando l’elemento viene adottato da un altro documento tramite il metodo document.adoptNode().

Nel nostro esempio, dunque, abbiamo sfruttato connectedCallback() per creare un contenuto per il nostro componente: 


connectedCallback() {
    this.innerText = "Eccomi!";
}

Da notare come this si riferisca all’istanza corrente del componente come elemento del DOM e possiamo quindi utilizzare le normali API del DOM per ispezionare la sua struttura o modificarla.

Inoltre, dal momento che il nostro componente deriva da HTMLElement, possiamo utilizzare le funzionalità comuni a tutti gli elementi HTML senza necessità di scrivere codice. Ad esempio, possiamo sfruttare l’attributo hidden: 


<my-rating hidden></my-rating>

oppure gestire l’evento click, come nel seguente esempio: 


<my-rating onclick="alert('Hai cliccato!')"></my-rating>
4 / 11

Aggiungere CSS e markup