@scope para estilos con ámbito

La regla at @scope (Chrome 118+, Safari 17.4+) limita las reglas CSS a un subárbol específico del DOM. Las reglas dentro de @scope solo se aplican a los elementos que están dentro de la raíz del ámbito declarada, lo que evita que los estilos se filtren entre componentes.

Declare un ámbito con un selector de raíz del ámbito. Todas las reglas que contiene se aplican únicamente a los descendientes de las raíces del ámbito coincidentes, no a todo el documento.

La raíz del ámbito (@scope (.card)) define el punto de entrada. Los elementos dentro del ámbito que coincidan con .title reciben estilos. Los elementos fuera de .card que tengan la clase .title no se ven afectados: es una verdadera encapsulación de estilos sin Shadow DOM.

Puede definir opcionalmente una frontera del ámbito con to: @scope (.card) to (.nested-card). Las reglas se aplican dentro de .card, pero se detienen en los descendientes .nested-card, lo que limita los estilos a un nivel de anidamiento de componentes y excluye las instancias más profundas.

Dentro de un bloque @scope, :scope hace referencia al propio elemento raíz del ámbito. @scope (.card) { :scope { border-radius: 8px; } } aplica estilos directamente al elemento .card, no a sus descendientes.

@scope introduce una especificidad basada en la proximidad: cuando varios ámbitos coinciden con un elemento, gana la raíz del ámbito antecesora más cercana, independientemente de la especificidad del selector. Esto evita que los estilos de componentes profundamente anidados sean sobrescritos por estilos de ámbitos antecesores lejanos.

CSS Modules generan nombres de clase únicos mediante hashes para lograr el ámbito en tiempo de compilación: una cuestión del empaquetador de JavaScript. @scope logra el ámbito de forma nativa en el navegador, sin herramientas de compilación, nombres con hash ni sintaxis específica de un framework: CSS puro.

Shadow DOM crea un aislamiento completo de estilos: los estilos externos no pueden atravesarlo. @scope crea un aislamiento parcial: los estilos externos todavía pueden llegar a los elementos dentro del ámbito si su especificidad es suficientemente alta. @scope es una alternativa más ligera para aplicar ámbitos a los componentes sin un aislamiento total.

Combine @scope con @layer para obtener un control preciso de la cascada: defina los estilos con ámbito del componente dentro de una capa del componente. De este modo, puede gestionar tanto el orden de la cascada (mediante capas) como el ámbito de los estilos (mediante @scope) de forma componible y sin complicaciones al nombrar clases.

Componentes de un sistema de diseño: limite todos los estilos de los botones a @scope (.button-group) para que los estilos de los botones internos nunca se propaguen fuera. Aislamiento de widgets: limite los estilos de un widget de terceros a su contenedor para evitar conflictos con los estilos globales de la página.

@scope es compatible con Chrome 118+, Safari 17.4+ y Firefox 128+. En navegadores que no son compatibles, los estilos dentro de @scope se ignoran y la cascada recurre a los estilos globales. Use @scope como mejora progresiva cuando aplicar ámbitos a los componentes sea útil, pero no esencial.

¿Qué problema resuelve @scope que resulta difícil abordar únicamente con los selectores CSS tradicionales?

@scope limita la aplicación de las reglas CSS a un subárbol del DOM declarado, lo que permite encapsular estilos de forma nativa sin Shadow DOM ni nombres de clase generados mediante hash por una herramienta de compilación. Los límites del ámbito, la especificidad basada en la proximidad y la integración con @layer convierten a @scope en un recurso fundamental para crear sistemas de diseño con ámbitos por componente usando únicamente CSS.