@scope

Definition

Règle at qui limite la portée des styles à un sous-arbre DOM spécifique, avec une borne haute (scope root) et optionnellement une borne basse (scope limit). Résout le problème de fuite de styles.

Analogie

Comme une clôture de jardin avec une zone interdite au fond : les règles s'appliquent dans l'espace délimité.

Exemple de code

@scope (.card) to (.card-footer) {
  p { color: navy; }
  a { text-decoration: underline; }
}
/* Les <p> dans .card-footer ne sont pas affectés */

Cas d'usage

Isoler les styles d'un composant sans Shadow DOM ni convention de nommage comme BEM.

Termes lies