I Web Components rappresentano un insieme di tecnologie native del browser che permettono di creare componenti HTML personalizzati, riutilizzabili e incapsulati, senza dipendere da framework o librerie esterne. Basati su standard web aperti, i Web Components offrono una soluzione nativa al problema della componentizzazione dell’interfaccia utente che ha guidato lo sviluppo di React, Vue e Angular. In questa guida esploreremo le tre tecnologie fondamentali che compongono i Web Components.
Cosa Sono i Web Components
I Web Components sono un insieme di tre tecnologie browser complementari che, combinate, permettono di creare elementi HTML personalizzati con un comportamento e uno stile encapsulato. Queste tecnologie sono: Custom Elements per definire nuovi tag HTML, Shadow DOM per l’incapsulamento di stile e struttura, e HTML Templates per definire markup riutilizzabile.
Il vantaggio fondamentale dei Web Components è che sono basati su standard web nativi, supportati da tutti i browser moderni senza la necessità di transpilazione, build step o librerie aggiuntive. Un componente creato con Web Components funziona in qualsiasi contesto: un sito HTML statico, un’applicazione React, un progetto Vue o Angular. Questa interoperabilità li rende particolarmente adatti per librerie di componenti UI condivise e design system aziendali.
La specifica dei Web Components è maturata significativamente negli ultimi anni e oggi gode di un supporto browser completo. Chrome, Firefox, Safari e Edge supportano tutte e tre le tecnologie nella loro versione attuale, rendendo i Web Components una scelta praticabile per la produzione.
Custom Elements: Definire Nuovi Tag HTML
I Custom Elements permettono di definire nuovi elementi HTML con un nome personalizzato, un comportamento specifico e un’interfaccia programmabile. La regola fondamentale per i nomi dei custom elements è che devono contenere un trattino (hyphen), ad esempio “my-button”, “user-card” o “app-header”. Questa convenzione evita conflitti con i tag HTML presenti e futuri.
Per creare un custom element, si definisce una classe JavaScript che estende HTMLElement (o un’altra classe di elemento HTML) e si registra con il metodo customElements.define(). All’interno della classe, il costruttore inizializza l’elemento, e metodi e proprietà personalizzati definiscono il suo comportamento.
I lifecycle callbacks sono metodi speciali che il browser chiama automaticamente in momenti specifici del ciclo di vita dell’elemento:
- constructor(): chiamato quando l’elemento viene creato. Usato per l’inizializzazione, la creazione del Shadow DOM e la configurazione iniziale. Non deve accedere ad attributi o figli perché potrebbero non essere ancora disponibili
- connectedCallback(): chiamato quando l’elemento viene inserito nel DOM. È il momento ideale per configurare event listener, avviare fetch di dati e renderizzare il contenuto
- disconnectedCallback(): chiamato quando l’elemento viene rimosso dal DOM. Usato per pulire risorse, rimuovere event listener e interrompere operazioni in corso
- attributeChangedCallback(nome, vecchioValore, nuovoValore): chiamato quando un attributo osservato viene aggiunto, modificato o rimosso. Gli attributi da osservare devono essere dichiarati nella proprietà statica observedAttributes
- adoptedCallback(): chiamato quando l’elemento viene spostato in un nuovo documento. Raramente utilizzato nella pratica
Esistono due tipi di custom elements: gli autonomous elements che estendono HTMLElement e vengono usati come tag indipendenti, e i customized built-in elements che estendono elementi HTML esistenti (come HTMLButtonElement) e vengono usati con l’attributo is=”my-button” sull’elemento nativo. Quest’ultimo approccio ha un supporto browser incompleto (Safari non lo supporta), quindi gli autonomous elements sono la scelta più sicura.
Shadow DOM: Incapsulamento di Stile e Struttura
Il Shadow DOM è la tecnologia che fornisce l’incapsulamento ai Web Components. Crea un albero DOM separato e isolato, chiamato “shadow tree”, che è nascosto dal DOM principale (light DOM) della pagina. Gli stili CSS definiti all’interno del Shadow DOM non influenzano il resto della pagina, e viceversa, gli stili della pagina non penetrano nel Shadow DOM.
Per creare un Shadow DOM, si chiama il metodo attachShadow() sull’elemento, passando un oggetto di configurazione con la proprietà mode. Il valore “open” rende il shadow root accessibile tramite JavaScript (element.shadowRoot), mentre “closed” lo nasconde completamente. Nella maggior parte dei casi, “open” è la scelta appropriata, poiché “closed” può complicare il testing e il debugging senza offrire vera sicurezza.
L’incapsulamento del Shadow DOM opera su più livelli. Gli stili CSS sono completamente isolati: un selettore come p { color: red; } nel Shadow DOM non colorerà i paragrafi della pagina esterna, e uno stile p { color: blue; } nella pagina non influenzerà i paragrafi interni al componente. Alcune proprietà CSS ereditabili (come font-family, color e line-height) attraversano il confine del Shadow DOM, poiché sono ereditate dall’elemento host.
Lo pseudo-elemento :host seleziona l’elemento host del Shadow DOM dall’interno, permettendo di stilizzare il componente stesso. :host(.className) seleziona l’host solo quando ha una specifica classe. ::slotted(selettore) stilizza gli elementi proiettati tramite slot. La proprietà CSS part e lo pseudo-elemento ::part() permettono all’esterno di stilizzare parti specifiche del componente, offrendo punti di personalizzazione controllati.
HTML Templates e Slot
L’elemento <template> definisce un frammento di markup HTML che non viene renderizzato dal browser fino a quando non viene esplicitamente clonato e inserito nel DOM tramite JavaScript. Il suo contenuto è “inerte”: le immagini non vengono scaricate, gli script non vengono eseguiti e gli stili non vengono applicati fino all’attivazione.
Per utilizzare un template, si accede al suo contenuto tramite la proprietà content (un DocumentFragment) e lo si clona con cloneNode(true) (il parametro true indica una clonazione profonda). Il clone viene poi inserito nel Shadow DOM o nel DOM della pagina. Questo pattern è più efficiente della creazione di elementi tramite innerHTML, poiché il template viene parsato una sola volta dal browser.
Gli slot sono un meccanismo potente che permette di proiettare contenuto dal light DOM all’interno del Shadow DOM. L’elemento <slot> nel template del componente funge da segnaposto: il contenuto inserito dall’utente del componente tra i tag del custom element viene proiettato nella posizione dello slot. Per approfondire il funzionamento dei template e degli slot, consulta il nostro articolo dedicato al tag template in HTML.
Esistono slot con nome (named slots) e uno slot predefinito (default slot). Uno slot con nome viene dichiarato con l’attributo name e riceve il contenuto dagli elementi con attributo slot corrispondente. Lo slot predefinito (senza attributo name) riceve tutto il contenuto che non ha un attributo slot specifico. Se nessun contenuto viene proiettato, lo slot mostra il suo contenuto di fallback.
Web Components vs Framework: Quando Usare Cosa
I Web Components e i framework JavaScript (React, Vue, Angular) non sono necessariamente in competizione; spesso si complementano. Tuttavia, comprendere le differenze è importante per fare la scelta giusta in ogni progetto.
I Web Components eccellono come soluzione per: componenti UI condivisi tra progetti che utilizzano framework diversi, design system aziendali che devono essere framework-agnostic, widget distribuibili da integrare in siti di terze parti, e scenari dove la riduzione delle dipendenze è prioritaria. La loro natura nativa garantisce la longevità: non diventano obsoleti quando esce una nuova versione di un framework.
I framework offrono vantaggi complementari: gestione dello stato dell’applicazione più sofisticata, ecosistemi di strumenti maturi (routing, build tools, testing), rendering lato server, e una Developer Experience (DX) spesso più completa. Per applicazioni complesse con molte pagine e logica di business elaborata, un framework rimane generalmente la scelta più produttiva.
La soluzione ideale per molte organizzazioni è un approccio ibrido: un design system basato su Web Components per i componenti UI di base (pulsanti, form, card, modali), utilizzato all’interno di applicazioni costruite con il framework preferito dal team. Questo approccio massimizza la riutilizzabilità e riduce la duplicazione tra progetti diversi.
Librerie come Lit (sviluppata da Google) semplificano significativamente la creazione di Web Components, fornendo un layer sottile sopra le API native che gestisce automaticamente il rendering reattivo, la gestione delle proprietà e altre funzionalità comuni, mantenendo la compatibilità con lo standard Web Components.
Hai bisogno di aiuto con lo sviluppo di Web Components per il tuo progetto? G Tech Group offre servizi di sviluppo web professionale e consulenza sulle architetture frontend. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.