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>