I componenti Web sono modelli nativi del browser per la creazione di componenti riutilizzabili. Funzionano su qualsiasi framework o senza framework. Questa guida presenta le tecnologie e come utilizzarle.
Cosa sono i componenti Web
Definizione
Insieme di standard per componenti incapsulati.
Tecnologie
Elementi personalizzati, Shadow DOM, modelli HTML.
Nativo
Supportato direttamente dai browser.
Indipendente dal framework
Funziona con React, Vue, Angular o pure.
Perché i componenti Web
Riutilizzo
Un componente, qualsiasi progetto.
Incapsulamento
Gli stili non trapelano.
Modelli
Non dipende dalla biblioteca.
Longevità
I browser lo supportano, non lo deprecano.
Elementi personalizzati
Di cosa si tratta
Definisce nuovi elementi HTML.
Sintassi
classe MyElement estende HTMLElement { } customElements.define('my-element', MyElement);
###Ciclo di vita
connessoCallback, disconnessoCallback, attributoChangedCallback.
Utilizzo
DOM ombra
Di cosa si tratta
DOM incapsulato all'interno dell'elemento.
Incapsulamento
I CSS non fuoriescono né entrano dall'esterno.
Creazione
this.attachShadow({ modalità: 'open' });
Slot
Modelli HTML
Di cosa si tratta
Frammenti HTML che non vengono visualizzati finché non vengono clonati.
Sintassi
Utilizzo
Clona e aggiungi al DOM.
Prestazioni
Non rende fino a quando necessario.
Richiamate del ciclo di vita
connessoRichiamata
Quando aggiunto al DOM.
disconnessoRichiamata
Quando viene rimosso dal DOM.
attributoChangedCallback
Quando l'attributo cambia.
adottatoRichiamata
Quando spostato in un nuovo documento.
Attributi e proprietà
Attributi
Stringhe in HTML.
Proprietà
Valori JavaScript nell'oggetto.
Sincronizzazione
Rifletti tra entrambi.
Attributi osservati
static get osservatoAttributes() { return ['valore']; }
Slot
Slot predefinito
Slot con nome
Utilizzo
Ripiego
Il contenuto all'interno dello slot è di riserva.
##Stile
Stili DOM ombra
Stili all'interno della radice dell'ombra.
###: ospite
Applica uno stile all'elemento host.
::a fessura
Stili del contenuto scanalato.
Parti CSS
::part() per la personalizzazione esterna.
Variabili CSS
Passano attraverso il confine dell'ombra.
Con framework
###Reagisci
Può essere utilizzato con un involucro.
Vedi
Supporto nativo per elementi personalizzati.
Angolare
CUSTOM_ELEMENTI_SCHEMA.
###Lett
Libreria per facilitare la creazione.
Elemento illuminato
Di cosa si tratta
Libreria Google per Componenti Web.
Vantaggi
Meno standard, proprietà reattive.
Modelli
Letterali del modello contrassegnati.
Adozione
Popolare per Componenti Web.
##Stampino
Di cosa si tratta
Compilatore per Web Components.
###JSX
Sintassi familiare per gli sviluppatori React.
Script dattiloscritto
Supporto nativo.
Caricamento lento
Ottimizzazione automatica.
Supporto del browser
Moderno
Tutti i browser moderni lo supportano.
Polifill
Per i vecchi browser.
Verifica
https://caniuse.com/custom-elementsv1
Test
Test unitari
Scherzo, Moka con DOM.
Test runner web
Test moderni per componenti web.
WC aperto
Strumenti di test.
##Prestazioni
Costo iniziale
Shadow DOM in alto.
Ridimensionamento
Molti componenti sono efficienti.
Pacchetto
I componenti vengono caricati su richiesta.
Errori comuni
Dimentica Super
super() nel costruttore.
Attributo vs Proprietà
Confondi i due.
Costruttore pesante
Tanto lavoro nel costruttore.
Perdita di stile
Senza utilizzare Shadow DOM.
Casi d'uso
Sistemi di progettazione
Componenti condivisi.
Microfrontend
Integrazione di parti indipendenti.
Widget di terze parti
Incorporalo in qualsiasi sito web.
Integrazione legacy
Modernizzare gradualmente.
Conclusione
I componenti Web sono standard potenti per componenti realmente riutilizzabili. Funzionano oggi in tutti i browser moderni e completano qualsiasi stack.
##Domande frequenti
1) I componenti Web sostituiscono React? Non necessariamente. Possono coesistere.
2) Ho bisogno di Lit o Stencil? Aiutano, ma la vaniglia pura funziona.
3) La SEO funziona con Shadow DOM? Google esegue il rendering di JavaScript. Di solito funziona.
4) Le prestazioni sono buone? Sì. I browser sono ottimizzati.
5) Quando utilizzare Componenti Web? Componenti condivisi tra progetti/framework.
Leggi anche
- Componenti Web con Lit: Guida pratica per un'interfaccia utente riutilizzabile
- Alpine.js: la soluzione definitiva per siti web semplici e interattivi nel 2025
- Sviluppo Web moderno nel 2025: tendenze, strumenti e strategie innovative
- Frontend, backend e full stack: la guida per chi decide, non per chi programma
- GraphQL per applicazioni: Guida all'implementazione
- Buone pratiche di internazionalizzazione (i18n) in React e Next.js nel 2025