@scope dla stylów o ograniczonym zakresie

Reguła at @scope (Chrome 118+, Safari 17.4+) ogranicza działanie reguł CSS do określonego poddrzewa DOM. Reguły wewnątrz @scope dotyczą wyłącznie elementów znajdujących się w zadeklarowanym zakresie, zapobiegając wyciekaniu stylów między komponentami.

Zakres należy zadeklarować za pomocą selektora elementu głównego zakresu. Wszystkie reguły wewnątrz dotyczą wyłącznie elementów potomnych pasujących do elementu głównego zakresu, a nie całego dokumentu.

Element główny zakresu (@scope (.card)) określa punkt wejścia. Elementy znajdujące się w zakresie, które pasują do .title, są stylowane. Elementy znajdujące się poza .card, ale mające klasę .title, pozostają bez zmian — jest to prawdziwa enkapsulacja stylów bez użycia Shadow DOM.

Opcjonalnie można zdefiniować granicę zakresu za pomocą to: @scope (.card) to (.nested-card). Reguły obowiązują wewnątrz .card, ale zatrzymują się na elementach potomnych .nested-card — ograniczając style do jednego poziomu zagnieżdżenia komponentu i wykluczając głębiej zagnieżdżone wystąpienia.

Wewnątrz bloku @scope :scope odnosi się do samego elementu głównego zakresu. @scope (.card) { :scope { border-radius: 8px; } } styluje bezpośrednio element .card, a nie jego elementy potomne.

@scope wprowadza specyficzność zależną od bliskości: gdy do elementu pasuje wiele zakresów, wygrywa najbliższy element główny zakresu — niezależnie od specyficzności selektora. Zapobiega to nadpisywaniu głęboko zagnieżdżonych stylów komponentu przez style z odległych zakresów nadrzędnych.

Moduły CSS generują unikatowe, haszowane nazwy klas, aby zapewnić zakresowanie podczas budowania — jest to kwestia bundlera JavaScript. @scope zapewnia zakresowanie natywnie w przeglądarce, bez narzędzi do budowania, haszowanych nazw ani składni specyficznej dla frameworka — to czysty CSS.

Shadow DOM tworzy pełną izolację stylów — zewnętrzne style nie mogą przeniknąć do środka. @scope tworzy częściową izolację — style z zewnątrz nadal mogą dotrzeć do elementów objętych zakresem, jeśli ich specyficzność jest wystarczająco duża. @scope to lżejsza alternatywa dla zakresowania komponentów, niewymagająca pełnej izolacji.

Połączenie @scope z @layer umożliwia precyzyjną kontrolę nad kaskadą: style ograniczone do komponentu można definiować w warstwie komponentu. W ten sposób można kompozycyjnie zarządzać zarówno kolejnością kaskady (za pomocą warstw), jak i zakresem stylów (za pomocą @scope), bez żonglowania nazwami klas.

Komponenty systemu projektowego: ogranicz wszystkie style przycisków do @scope (.button-group), aby style wewnętrznych przycisków nigdy nie wydostały się poza ten zakres. Izolowanie widżetu: ogranicz style widżetu zewnętrznego dostawcy do jego kontenera, zapobiegając konfliktom z globalnymi stylami strony.

@scope jest obsługiwane w Chrome 118+, Safari 17.4+ i Firefox 128+. W przeglądarkach, które go nie obsługują, style wewnątrz @scope są ignorowane — kaskada przechodzi do globalnych stylów. Używaj @scope jako progresywnego ulepszenia, gdy zakresowanie komponentów jest korzystne, ale nie krytyczne.

Jaki problem rozwiązuje @scope, który trudno rozwiązać za pomocą samych tradycyjnych selektorów CSS?

@scope ogranicza stosowanie reguł CSS do zadeklarowanego poddrzewa DOM, umożliwiając natywne hermetyzowanie stylów bez Shadow DOM ani haszowania nazw klas przez narzędzia do budowania. Ograniczenia zakresu, specyficzność wynikająca z bliskości oraz integracja z @layer sprawiają, że jest to potężny fundament systemów projektowych z komponentami ograniczonymi do zakresu, tworzonych w czystym CSS.