@scope pour des styles à portée limitée

La règle @scope (@scope) (Chrome 118+, Safari 17.4+) limite les règles CSS à un sous-arbre précis du DOM. Les règles placées dans @scope s'appliquent uniquement aux éléments situés dans la racine de portée déclarée, ce qui empêche les styles de se propager entre les composants.

Déclarez une portée avec un sélecteur de racine de portée. Toutes les règles qu'elle contient s'appliquent uniquement aux descendants des racines de portée correspondantes, et non à l'ensemble du document.

La racine de portée (@scope (.card)) définit le point d'entrée. Les éléments situés dans la portée qui correspondent à .title sont stylisés. Les éléments situés en dehors de .card et possédant la classe .title ne sont pas affectés : cela permet une véritable encapsulation des styles sans DOM encapsulé.

Vous pouvez définir une frontière de portée avec to : @scope (.card) to (.nested-card). Les règles s'appliquent dans .card, mais s'arrêtent aux descendants .nested-card : les styles sont ainsi limités à un niveau d'imbrication des composants et les instances plus profondes sont exclues.

Dans un bloc @scope, :scope désigne l'élément racine de la portée lui-même. @scope (.card) { :scope { border-radius: 8px; } } applique un style directement à l'élément .card, et non à ses descendants.

@scope introduit une spécificité fondée sur la proximité : lorsque plusieurs portées correspondent à un élément, la racine de portée ancêtre la plus proche l'emporte, quelle que soit la spécificité du sélecteur. Cela empêche les styles de composants profondément imbriqués d'être remplacés par ceux de portées ancestrales éloignées.

Les modules CSS génèrent des noms de classe hachés uniques pour obtenir une portée au moment de la construction — une préoccupation liée à l’outil de regroupement JavaScript. @scope apporte une portée native dans le navigateur, sans outils de construction, noms hachés ni syntaxe propre à une infrastructure — du CSS pur.

Le DOM fantôme crée une isolation complète des styles : les styles externes ne peuvent pas le pénétrer. @scope crée une isolation partielle : les styles extérieurs peuvent toujours atteindre les éléments délimités si leur spécificité est suffisamment élevée. @scope constitue une solution plus légère pour limiter la portée des composants sans isolation complète.

Combinez @scope avec @layer pour contrôler finement la cascade : définissez les styles propres au composant dans une couche de composant. Vous gérez ainsi à la fois l’ordre de la cascade (avec les couches) et la portée des styles (avec @scope), de manière composable et sans acrobaties de nommage de classes.

Composants de système de conception : limitez la portée de tous les styles de bouton à @scope (.button-group) afin que les styles des boutons internes ne se propagent jamais à l’extérieur. Isolation de widgets : limitez la portée des styles d’un widget tiers à son conteneur pour éviter les conflits avec les styles globaux de la page.

@scope est pris en charge par Chrome 118+, Safari 17.4+ et Firefox 128+. Dans les navigateurs non compatibles, les styles placés dans @scope sont ignorés : la cascade utilise alors les styles globaux. Utilisez @scope comme amélioration progressive lorsque la limitation de portée des composants est utile, mais pas indispensable.

Quel problème @scope résout-il, alors qu’il est difficile de le résoudre avec les seuls sélecteurs CSS traditionnels ?

@scope limite l’application des règles CSS à un sous-arbre DOM déclaré, ce qui permet d’encapsuler nativement les styles sans DOM fantôme ni hachage des noms de classe par un outil de construction. Les limites de portée, la spécificité de proximité et l’intégration avec @layer en font une primitive puissante pour les systèmes de conception à portée limitée par composant, en CSS pur.