Cosa sono i Web Components

Con i framework JavaScript, come React e Angular, gli sviluppatori sono in grado da tempo di definire elementi Web riutilizzabili. Tuttavia, ogni framework utilizza uno standard diverso, che in molti casi impedisce l’uso incrociato di pratici frammenti di codice. I cosiddetti Web Components sono la soluzione, in quanto si tratta di componenti HTML riutilizzabili che possono essere utilizzati indipendentemente dal framework. Standardizzato nel 2012, questo modello è supportato oggi da tutti i browser più comuni.

Cosa sono i Web Components?

I Web Components sono blocchi di codice che racchiudono la struttura interna di elementi HTML, compresi CSS e JavaScript, e consentono di applicare il codice relativo in una qualsiasi posizione di siti e applicazioni Web. Il concetto è stato sviluppato da un gruppo di lavoro del World Wide Web Consortium (W3C), fondato nel 1994 dall’inventore del Web Tim Berners-Lee, che da sempre si è impegnato attivamente per standardizzare tutte le tecnologie Web elementari. Il modello dei Web Components, pubblicato come standard nel 2012, prevede principalmente le quattro specifiche seguenti per la creazione di componenti HTML funzionali:

  • Custom Elements: set di API JavaScript per la definizione di elementi personalizzati
  • Shadow DOM: set di API JavaScript per l’inserimento di elementi DOM
  • ES Modules: moduli per l’inserimento e il riutilizzo di documenti JavaScript
  • HTML Templates: modelli di markup che non sono mappati sulla pagina visualizzata e possono essere utilizzati come base per elementi personalizzati.

Lo standard Web Components è attualmente supportato da tutti i browser più comuni. In tutti i framework JavaScript e le librerie che lavorano con HTML si possono utilizzare codici HTML incapsulati.

Perché utilizzare i Web Components?

Librerie e framework come Angular o jQuery sono stati per anni gli strumenti più utilizzati da qualsiasi programmatore Web. Per quanto pratiche e versatili, queste strutture di base del codice, che permettono di risparmiare molto lavoro nello sviluppo di progetti, si rivelano troppo rigide per un utilizzo dei progetti di tipo trasversale. Non è raro che gli sviluppatori debbano riscrivere o revisionare il codice quando, ad esempio, è previsto un cambiamento del framework. Per questo motivo, il World Wide Web Consortium (W3C) ha introdotto i Web Components e quindi un framework universale per il riutilizzo semplice e transettoriale del codice HTML, CSS e JavaScript.

Poiché gli elementi universali del Web sono caratterizzati da una sintassi semplice e veloce da apprendere, anche i programmatori alle prime armi beneficiano dello standard W3C. Negli ultimi anni Google ha lavorato nell’ambito del “Polymer Project”, al fine di sviluppare librerie e template per la programmazione dei Web Components e metterli a libera disposizione.

Elementi dei Web Components in sintesi

Il modello dei Web Components si basa su quattro specifiche fondamentali, che vi illustriamo nel dettaglio con alcuni esempi.

Custom Elements

I Custom Elements (elementi personalizzati) sono tag HTML che incapsulano contenuti HTML, compresi istruzioni CSS e script; essi sono dichiarati nel CustomElementRegistry. Ecco quali sono le caratteristiche più importanti:

  • 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 CustomElementRegistry.

Per creare un Custom Element, sono necessari JavaScript e il metodo define. L’esempio seguente di Web Components mostra un Custom Element che può essere utilizzato per inserire un singolo pulsante:

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

Il codice seguente è sufficiente per utilizzare questo elemento in un’applicazione Web:

<mio-pulsante></mio-pulsante>

Shadow DOM

La caratteristica più importante dei Web Components è la loro capacità di incapsulare 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 principale ogni volta. Per informazioni più dettagliate ed esempi pratici su questo tipo di tecnologia potete leggere il nostro articolo di approfondimento sui Shadow Doms e il loro funzionamento.

ES Modules

Gli ES Modules sono moduli che esportano oggetti, funzioni o variabili da un file JavaScript. Questa proprietà consente di suddividere le variabili all’interno di un file in gruppi e di farvi riferimento. Attualmente esistono due sistemi ES Modul: mentre CommonJS originariamente era incluso in Node.JS, il sistema più recente è già compreso in JavaScript ES6.

Per esportare una funzione da una libreria JavaScript, utilizzate il metodo export. L’esempio riporta l’esportazione di una funzione che riproduce due volte una stringa di input.

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

Con import è possibile richiamare 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 esplicitamente. Ciò significa che non hanno alcun effetto negativo sul tempo di caricamento di una pagina Web. Sono quindi un’utile alternativa ai metodi JavaScript convenzionali.

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 utilizzare il template in una pagina Web, richiamatelo con i metodi JavaScript getElementbyId e content e allegatelo al DOM.

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

Come si utilizzano i Web Components?

Gli esempi riportati funzionano solo se si combinano tra loro i singoli componenti del modello Web Components. Lo schema seguente semplifica la procedura:

  1. Create una classe o funzione JavaScript o esportatela da un file JavaScript esistente utilizzando gli ES Modules.
  2. Dichiarate il nuovo Custom Element utilizzando il metodo CustomElementRegistry.define().
  3. Se necessario o desiderato, aggiungete 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’introduzione semplice alla programmazione dei Web Components:

mTNdTcwK3MM.jpg Per visualizzare questo video, sono necessari i cookie di terze parti. Puoi accedere e modificare le impostazioni dei cookie qui.

Compatibilità dei Web Components con le diverse versioni del browser

La compatibilità dei Web Components non era ancora disponibile nelle versioni precedenti del browser. Oggi, tutti i comuni browser supportano Custom Elements, Shadow DOM, ES Modules e HTML Templates. La seguente tabella fornisce una panoramica sulla compatibilità dei vari Web Components.

Compatibile? 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 Components

La programmazione dei Web Components può essere complicata, specialmente per i principianti. Sul Web, tuttavia, troverete numerose librerie con modelli e funzioni standard, nonché esempi pratici per facilitare il vostro lavoro.

  • Lit Element: classe di base semplice per la creazione di Web Components.
  • Polymer Project: nell’ambito del Polymer Project, Google offre vari strumenti per lavorare con i Web Components, tra cui un kit iniziale per la programmazione di applicazioni con Web Components, una libreria di template HTML per JavaScript e vari elementi pronti all’uso.
  • Hybrids: fornisce una semplice libreria di interfaccia utente per la creazione di Web Components.
  • Slim.js: libreria con proprietà avanzate per i Web Components che utilizza l’eredità di JavaScript ES6 basata su classi.
Hai trovato questo articolo utile?
Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.