Web Components sono un insieme di API native del browser per costruire elementi HTML personalizzati riutilizzabili e incapsulati — indipendenti dai framework e basati su standard. Tre tecnologie si combinano:
Web Components sono un insieme di API native del browser per costruire elementi HTML personalizzati riutilizzabili e incapsulati — indipendenti dai framework e basati su standard. Tre tecnologie si combinano:
<template>, <slot>) — markup inerte e riutilizzabile.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Gli stili all'interno della shadow root sono scoped — il CSS della pagina non può raggiungerli, e il CSS del componente non può diffondersi all'esterno. Questo risolve il problema del CSS globale nativamente:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
I Web Components ti permettono di costruire widget riutilizzabili che funzionano in qualsiasi framework (o senza) con vero incapsulamento di stili e DOM — ideale per design system e micro-frontend condivisi tra team che usano stack diversi.
È così che librerie come Shoelace forniscono componenti indipendenti dai framework.
I compromessi (API verbosa, complessità SSR/styling) significano che i developer di app spesso preferiscono ancora React/Vue, ma la primitiva della piattaforma è potente e basata su standard.