@scope per stili con ambito locale

La regola at @scope (Chrome 118+, Safari 17.4+) limita le regole CSS a uno specifico sottoalbero del DOM. Le regole all'interno di @scope si applicano solo agli elementi contenuti nella radice dell'ambito dichiarata, impedendo la fuoriuscita degli stili tra componenti.

Dichiari un ambito con un selettore della radice dell'ambito. Tutte le regole al suo interno si applicano solo ai discendenti delle radici dell'ambito corrispondenti, non all'intero documento.

La radice dell'ambito (@scope (.card)) definisce il punto di ingresso. Gli elementi all'interno dell'ambito che corrispondono a .title ricevono lo stile. Gli elementi esterni a .card con la classe .title non vengono modificati: è un vero incapsulamento degli stili senza Shadow DOM.

È possibile definire facoltativamente un limite dell'ambito con to: @scope (.card) to (.nested-card). Le regole si applicano all'interno di .card, ma si fermano in corrispondenza dei discendenti .nested-card, limitando gli stili a un solo livello di annidamento dei componenti ed escludendo le istanze più profonde.

All'interno di un blocco @scope, :scope fa riferimento all'elemento radice dell'ambito. @scope (.card) { :scope { border-radius: 8px; } } applica lo stile direttamente all'elemento .card, non ai suoi discendenti.

@scope introduce una specificità basata sulla prossimità: quando più ambiti corrispondono a un elemento, prevale la radice dell'ambito antenata più vicina, indipendentemente dalla specificità del selettore. In questo modo si impedisce che gli stili dei componenti profondamente annidati vengano sovrascritti dagli stili degli ambiti antenati più lontani.

CSS Modules generano nomi di classe univoci con hash per ottenere lo scope in fase di build, un aspetto che riguarda il bundler JavaScript. @scope ottiene lo scope nativamente nel browser, senza strumenti di build, nomi con hash o sintassi specifiche di un framework: puro CSS.

Shadow DOM crea un isolamento completo degli stili: gli stili esterni non possono penetrarvi. @scope crea un isolamento parziale: gli stili esterni possono ancora raggiungere gli elementi inclusi nello scope se hanno una specificità sufficiente. @scope è un'alternativa più leggera per definire lo scope dei componenti senza un isolamento completo.

Combini @scope con @layer per ottenere un controllo preciso della cascata: definisca gli stili con scope del componente in un livello dedicato al componente. In questo modo gestisce sia l'ordine della cascata, tramite i livelli, sia lo scope degli stili, tramite @scope, in modo componibile e senza complicate strategie di denominazione delle classi.

Componenti di un design system: definisca lo scope di tutti gli stili dei pulsanti con @scope (.button-group), così gli stili dei pulsanti interni non fuoriescono mai. Isolamento dei widget: definisca lo scope degli stili di un widget di terze parti rispetto al suo contenitore, impedendo conflitti con gli stili globali della pagina.

@scope è supportato da Chrome 118+, Safari 17.4+ e Firefox 128+. Nei browser non supportati, gli stili all'interno di @scope vengono ignorati e la cascata ricade sugli stili globali. Utilizzi @scope come miglioramento progressivo quando definire lo scope dei componenti è utile, ma non essenziale.

@scope limita l'applicazione delle regole CSS a un sottoalbero DOM dichiarato, consentendo l'incapsulamento nativo degli stili senza Shadow DOM o senza l'hashing dei nomi delle classi tramite strumenti di build. I limiti dello scope, la specificità di prossimità e l'integrazione con @layer rendono @scope una primitiva potente per i design system con scope dei componenti in puro CSS.