Cosa sono i Web Com­po­nen­ts

Con i framework Ja­va­Script, come React e Angular, gli svi­lup­pa­to­ri sono in grado da tempo di definire elementi Web riu­ti­liz­za­bi­li. Tuttavia, ogni framework utilizza uno standard diverso, che in molti casi impedisce l’uso in­cro­cia­to di pratici frammenti di codice. I co­sid­det­ti Web Com­po­nen­ts sono la soluzione, in quanto si tratta di com­po­nen­ti HTML riu­ti­liz­za­bi­li che possono essere uti­liz­za­ti in­di­pen­den­te­men­te dal framework. Stan­dar­diz­za­to nel 2012, questo modello è sup­por­ta­to oggi da tutti i browser più comuni.

Cosa sono i Web Com­po­nen­ts?

I Web Com­po­nen­ts sono blocchi di codice che rac­chiu­do­no la struttura interna di elementi HTML, compresi CSS e Ja­va­Script, e con­sen­to­no di applicare il codice relativo in una qualsiasi posizione di siti e ap­pli­ca­zio­ni Web. Il concetto è stato svi­lup­pa­to da un gruppo di lavoro del World Wide Web Con­sor­tium (W3C), fondato nel 1994 dall’inventore del Web Tim Berners-Lee, che da sempre si è impegnato at­ti­va­men­te per stan­dar­diz­za­re tutte le tec­no­lo­gie Web ele­men­ta­ri. Il modello dei Web Com­po­nen­ts, pub­bli­ca­to come standard nel 2012, prevede prin­ci­pal­men­te le quattro spe­ci­fi­che seguenti per la creazione di com­po­nen­ti HTML fun­zio­na­li:

• Custom Elements: set di API Ja­va­Script per la de­fi­ni­zio­ne di elementi per­so­na­liz­za­ti
• Shadow DOM: set di API Ja­va­Script per l’in­se­ri­men­to di elementi DOM
• ES Modules: moduli per l’in­se­ri­men­to e il riu­ti­liz­zo di documenti Ja­va­Script
• HTML Templates: modelli di markup che non sono mappati sulla pagina vi­sua­liz­za­ta e possono essere uti­liz­za­ti come base per elementi per­so­na­liz­za­ti.

Lo standard Web Com­po­nen­ts è at­tual­men­te sup­por­ta­to da tutti i browser più comuni. In tutti i framework Ja­va­Script e le librerie che lavorano con HTML si possono uti­liz­za­re codici HTML in­cap­su­la­ti.

Perché uti­liz­za­re i Web Com­po­nen­ts?

Librerie e framework come Angular o jQuery sono stati per anni gli strumenti più uti­liz­za­ti da qualsiasi pro­gram­ma­to­re Web. Per quanto pratiche e versatili, queste strutture di base del codice, che per­met­to­no di ri­spar­mia­re molto lavoro nello sviluppo di progetti, si rivelano troppo rigide per un utilizzo dei progetti di tipo tra­sver­sa­le. Non è raro che gli svi­lup­pa­to­ri debbano ri­scri­ve­re o re­vi­sio­na­re il codice quando, ad esempio, è previsto un cam­bia­men­to del framework. Per questo motivo, il World Wide Web Con­sor­tium (W3C) ha in­tro­dot­to i Web Com­po­nen­ts e quindi un framework uni­ver­sa­le per il riu­ti­liz­zo semplice e tran­set­to­ria­le del codice HTML, CSS e Ja­va­Script.

Poiché gli elementi uni­ver­sa­li del Web sono ca­rat­te­riz­za­ti da una sintassi semplice e veloce da ap­pren­de­re, anche i pro­gram­ma­to­ri alle prime armi be­ne­fi­cia­no dello standard W3C. Negli ultimi anni Google ha lavorato nell’ambito del “Polymer Project”, al fine di svi­lup­pa­re librerie e template per la pro­gram­ma­zio­ne dei Web Com­po­nen­ts e metterli a libera di­spo­si­zio­ne.

Elementi dei Web Com­po­nen­ts in sintesi

Il modello dei Web Com­po­nen­ts si basa su quattro spe­ci­fi­che fon­da­men­ta­li, che vi il­lu­stria­mo nel dettaglio con alcuni esempi.

Custom Elements

I Custom Elements (elementi per­so­na­liz­za­ti) sono tag HTML che in­cap­su­la­no contenuti HTML, compresi istru­zio­ni CSS e script; essi sono di­chia­ra­ti nel Cu­sto­mE­le­men­tRe­gi­stry. Ecco quali sono le ca­rat­te­ri­sti­che più im­por­tan­ti:

• Terminano con un tag di chiusura.
• Il loro nome è una stringa DOM e contiene sempre un trattino.
• Il loro nome può comparire una sola volta all’interno del Cu­sto­mE­le­men­tRe­gi­stry.

Per creare un Custom Element, sono necessari Ja­va­Script e il metodo define. L’esempio seguente di Web Com­po­nen­ts mostra un Custom Element che può essere uti­liz­za­to per inserire un singolo pulsante:

customElements.define('mio-pulsante', MioPulsante, { extends: 'p' });

Il codice seguente è suf­fi­cien­te per uti­liz­za­re questo elemento in un’ap­pli­ca­zio­ne Web:

<mio-pulsante></mio-pulsante>

Shadow DOM

La ca­rat­te­ri­sti­ca più im­por­tan­te dei Web Com­po­nen­ts è la loro capacità di in­cap­su­la­re elementi HTML. L’API Shadow DOM consente di allegare alberi DOM nascosti ad un albero di documenti. Dal momento che solo il tag HTML del Shadow DOM è visibile, il DOM nascosto può essere esteso con elementi HTML senza dover cambiare il DOM prin­ci­pa­le ogni volta. Per in­for­ma­zio­ni più det­ta­glia­te ed esempi pratici su questo tipo di tec­no­lo­gia potete leggere il nostro articolo di ap­pro­fon­di­men­to sui Shadow Doms e il loro fun­zio­na­men­to.

ES Modules

Gli ES Modules sono moduli che esportano oggetti, funzioni o variabili da un file Ja­va­Script. Questa proprietà consente di sud­di­vi­de­re le variabili all’interno di un file in gruppi e di farvi ri­fe­ri­men­to. At­tual­men­te esistono due sistemi ES Modul: mentre CommonJS ori­gi­na­ria­men­te era incluso in Node.JS, il sistema più recente è già compreso in Ja­va­Script ES6.

Per esportare una funzione da una libreria Ja­va­Script, uti­liz­za­te il metodo export. L’esempio riporta l’espor­ta­zio­ne di una funzione che riproduce due volte una stringa di input.

// ? lib.bib1
export const ripeti = (string) => `${string} ${string}`;
}

Con import è possibile ri­chia­ma­re la funzione esportata tutte le volte che si desidera.

main.mjs
import {ripeti} from './lib.mio';
ripeti ('Buongiorno');
// → 'Buongiorno Buongiorno'

Template HTML

Un template HTML è un modello per file HTML. Gli elementi contenuti rimangono inattivi e non vengono resi noti fino a quando non sono chiamati espli­ci­ta­men­te. Ciò significa che non hanno alcun effetto negativo sul tempo di ca­ri­ca­men­to di una pagina Web. Sono quindi un’utile al­ter­na­ti­va ai metodi Ja­va­Script con­ven­zio­na­li.

Per definire un template HTML si usa il tag <template>. Nell’esempio seguente viene creato un template chiamato “mio elemento”.

<template id="mio-elemento">
<p>Mio elemento</p>
</template>

Per uti­liz­za­re il template in una pagina Web, ri­chia­ma­te­lo con i metodi Ja­va­Script ge­tE­le­ment­by­Id e content e al­le­ga­te­lo al DOM.

let template = document.getElementById('mio-elemento');
let templateContent = template.content;
document.body.appendChild(templateContent);

Come si uti­liz­za­no i Web Com­po­nen­ts?

Gli esempi riportati fun­zio­na­no solo se si combinano tra loro i singoli com­po­nen­ti del modello Web Com­po­nen­ts. Lo schema seguente sem­pli­fi­ca la procedura:

1. Create una classe o funzione Ja­va­Script o espor­ta­te­la da un file Ja­va­Script esistente uti­liz­zan­do gli ES Modules.
2. Di­chia­ra­te il nuovo Custom Element uti­liz­zan­do il metodo Cu­sto­mE­le­men­tRe­gi­stry.define().
3. Se ne­ces­sa­rio o de­si­de­ra­to, ag­giun­ge­te un Shadow DOM nascosto per inserire elementi figli al vostro Custom Element.
4. Definite un template HTML con i tag <template> e <slot>.
5. Usate il Custom Element generato all’interno della vostra pagina Web come un normale elemento HTML.

Il seguente tutorial fornisce un’in­tro­du­zio­ne semplice alla pro­gram­ma­zio­ne dei Web Com­po­nen­ts:

Per vi­sua­liz­za­re questo video, sono necessari i cookie di terze parti. Puoi accedere e mo­di­fi­ca­re le im­po­sta­zio­ni dei cookie qui.

Com­pa­ti­bi­li­tà dei Web Com­po­nen­ts con le diverse versioni del browser

La com­pa­ti­bi­li­tà dei Web Com­po­nen­ts non era ancora di­spo­ni­bi­le nelle versioni pre­ce­den­ti del browser. Oggi, tutti i comuni browser sup­por­ta­no Custom Elements, Shadow DOM, ES Modules e HTML Templates. La seguente tabella fornisce una pa­no­ra­mi­ca sulla com­pa­ti­bi­li­tà dei vari Web Com­po­nen­ts.

Librerie, modelli ed esempi di Web Com­po­nen­ts

La pro­gram­ma­zio­ne dei Web Com­po­nen­ts può essere com­pli­ca­ta, spe­cial­men­te per i prin­ci­pian­ti. Sul Web, tuttavia, troverete numerose librerie con modelli e funzioni standard, nonché esempi pratici per fa­ci­li­ta­re il vostro lavoro.

• Lit Element: classe di base semplice per la creazione di Web Com­po­nen­ts.
• Polymer Project: nell’ambito del Polymer Project, Google offre vari strumenti per lavorare con i Web Com­po­nen­ts, tra cui un kit iniziale per la pro­gram­ma­zio­ne di ap­pli­ca­zio­ni con Web Com­po­nen­ts, una libreria di template HTML per Ja­va­Script e vari elementi pronti all’uso.
• Hybrids: fornisce una semplice libreria di in­ter­fac­cia utente per la creazione di Web Com­po­nen­ts.
• Slim.js: libreria con proprietà avanzate per i Web Com­po­nen­ts che utilizza l’eredità di Ja­va­Script ES6 basata su classi.