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:

mTNdTcwK3MM.jpg Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni 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.

Com­pa­ti­bi­le? Firefox Chrome Edge Safari Opera
Custom Elements Sì Sì Sì (dalla versione 76) Sì Sì
Shadow DOM Sì Sì Sì (dalla versione 75) Sì Sì
ES Modules Sì Sì Sì Sì Sì
Template HTML Sì Sì Sì Sì Sì

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.
Vai al menu prin­ci­pa­le