Stili con ambito nel DOM shadow

Ogni regola <style> all'interno di uno shadow root si applica solo a quello shadow root. p { color: red } in uno shadow tree colora solo i paragrafi al suo interno: i paragrafi del documento principale non vengono modificati e gli stili del documento principale non entrano nello shadow tree.

L'incapsulamento elimina il problema del CSS globale che affligge le applicazioni di grandi dimensioni da decenni. Gli stili di un componente non possono essere sovrascritti accidentalmente dal CSS del sito e il componente non può danneggiare accidentalmente il sito. Il confine è definito dalla specifica, non da una convenzione.

Dall'interno dello shadow tree, stilizzi l'elemento host con :host. Utilizzi :host(selector) per applicare l'ambito in base a un selettore: :host([open]) { display: block; } corrisponde all'host solo quando è presente l'attributo open.

Le proprietà CSS ereditate, come color, font-family e line-height, attraversano comunque il confine dello shadow tree tramite l'ereditarietà. Un'impostazione del documento come body { color: blue } rende blu anche il testo nello shadow tree, a meno che lo shadow tree non la sovrascriva esplicitamente. È un vantaggio: i valori predefiniti della tipografia restano coerenti.

Le proprietà personalizzate, ovvero le variabili CSS, vengono ereditate attraverso gli shadow root e sono quindi il modo canonico per esporre l'API di tematizzazione di un componente: dichiari --card-bg: var(--surface, white) all'interno dello shadow tree e lasci che gli utilizzatori sovrascrivano --surface sull'host.

Contrassegni un elemento interno allo shadow tree con part="name" e gli utilizzatori potranno stilizzarlo con my-card::part(name) { ... }. Utilizzi i part come punti di estensione per lo styling di singoli elementi, mantenendo incapsulata la maggior parte dello shadow tree.

shadowRoot.adoptedStyleSheets = [sheet] condivide un unico CSSStyleSheet tra molti shadow root, evitando di analizzare ripetutamente i tag <style>. Crei i fogli con new CSSStyleSheet() e sheet.replaceSync(cssText). È un notevole vantaggio prestazionale nei design system.

Inserisca i tag <style> all'inizio assoluto dell'innerHTML dello shadow tree, in modo che gli stili vengano analizzati prima della costruzione del resto del DOM. Questo evita il breve lampeggiamento del contenuto senza stili che si verifica quando gli stili arrivano tardi nell'ordine di parsing.

:host-context(.dark-mode) :host applica stili all'host in base a un selettore di un antenato esterno allo shadow tree. È utile per applicare un tema ai componenti in base a una classe su un contenitore di livello superiore. Il supporto dei browser è buono, ma lo verifichi nella matrice dei browser di destinazione.

I reset CSS applicati all'intero documento, come i margini su body e box-sizing, non influiscono sugli shadow tree. Applichi nuovamente i reset necessari all'interno di ogni shadow root oppure li condivida tramite un foglio di stile costruito e adottato in ogni componente.

Chrome DevTools mostra gli shadow root nel pannello Elements, sotto "#shadow-root (open)". Può ispezionare, modificare e attivare o disattivare gli stili dello shadow tree come qualsiasi altro CSS, incluse la pseudo-classe :host e le regole ::part.

Perché le proprietà personalizzate CSS, ovvero le variabili, sono il modo preferito per applicare un tema a un componente Shadow DOM?

Lo Shadow DOM incapsula gli stili in entrambe le direzioni. Stilizzi l'host con :host, esponga punti di estensione per la tematizzazione tramite proprietà personalizzate CSS ereditate, renda disponibili singoli elementi per lo styling con ::part, condivida i fogli di stile con adoptedStyleSheets e applichi nuovamente i reset all'interno di ogni shadow root, poiché il CSS dell'intero documento non attraversa il confine.