- Learn
- Guida ai Web Components
- Creare Web component
Creare Web component
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/[email protected]/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 metododocument.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>
Se vuoi aggiornamenti su JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Costruire una pagina con Twitter Bootstrap – Parte 1
Twitter Bootstrap è il famosissimo framework di Twitter per la creazione di siti e pagine web responsive e HTML5. In […]