Part ed Exportparts per gli stili esterni

Il rigoroso incapsulamento degli stili dello Shadow DOM impedisce agli utilizzatori di ristilizzare i singoli elementi all'interno di un componente. Le variabili CSS funzionano per le proprietà globali, ma non è possibile, per esempio, assegnare un border-radius personalizzato al pulsante interno "close". I part risolvono questo problema.

Contrassegni un elemento interno allo shadow tree con part="name". Gli utilizzatori potranno quindi selezionarlo con il pseudo-elemento ::part(name): my-dialog::part(close-button) { color: red; }. L'elemento denominato diventa un punto di estensione per lo styling, mentre il resto dello shadow tree rimane incapsulato.

Separi i nomi con spazi per esporre un elemento come più part: part="button primary". ::part(button) lo seleziona in modo generico, mentre ::part(primary) lo seleziona come elemento con stile primario. Ogni nome viene associato in modo indipendente.

::part consente solo alcune pseudo-classi, come :hover, :focus e :disabled, ma non i combinatori discendenti né ulteriori selezioni strutturali. ::part(card) p non è valido: non è possibile accedere all'interno di un part con selettori discendenti.

Quando un custom element annida un altro custom element all'interno del proprio shadow tree, i part dell'elemento interno normalmente non sono esposti alla pagina esterna. exportparts="close-button" sull'elemento annidato inoltra quei part all'host esterno.

exportparts="close-button: dismiss" esporta il part interno con un nuovo nome sull'elemento esterno. In questo modo il componente esterno può offrire un'interfaccia di denominazione chiara, indipendente dagli elementi interni che compone.

Le proprietà personalizzate espongono valori, come colori, spaziatura e font. I part espongono elementi, offrendo l'intera superficie CSS, inclusi bordi, trasformazioni e animazioni. Utilizzi le proprietà personalizzate per i token globali e i part per personalizzazioni occasionali a livello di elemento. Entrambi possono coesistere nello stesso componente.

Prassi dei design system: esponga un numero limitato di part per gli elementi maggiormente personalizzati, come pulsanti, intestazioni e indicatori, insieme a un'ampia serie di proprietà personalizzate per colori, spaziatura e tipografia. Gli utilizzatori possono applicare il tema a livello di valore o di elemento, a seconda delle proprie esigenze.

I nomi dei part diventano parte dell'API pubblica del componente: modificarli rompe il CSS degli utilizzatori. Scelga nomi che descrivano il ruolo dell'elemento, come "close-button", "header" e "track", anziché la sua posizione, come "first-button", così l'API rimane significativa anche quando l'implementazione evolve.

Elencare tutti i part disponibili, inclusi quelli esportati, nel readme del componente. Senza documentazione, gli utilizzatori devono ispezionare il DOM per scoprire i part, legandosi così a ciò che trovano in quel momento. Consideri l'elenco dei part come l'elenco delle props di un componente di un framework.

::part ed exportparts sono disponibili in tutti i browser moderni. Anche le versioni meno recenti di Safari ora supportano ::part. Li utilizzi liberamente; per i browser molto vecchi, ormai quasi del tutto abbandonati, utilizzi come soluzione alternativa ulteriori proprietà personalizzate CSS.

Che cosa fa l'attributo exportparts?

L'attributo part espone singoli elementi dello shadow tree per lo styling esterno tramite ::part(name), offrendo tutta la potenza del CSS senza compromettere l'incapsulamento. exportparts inoltra i part dai custom element annidati all'host esterno e consente anche di rinominarli. Combini i part con le proprietà personalizzate CSS per offrire una superficie completa di tematizzazione e documenti l'elenco dei part come parte dell'API del componente.