Qué es Constructor de reglas CSS @scope?
La regla @scope CSS permite a los desarrolladores definir un límite para las reglas de estilo, limitando su efecto a un subárbol DOM específico. Esto resuelve el problema clásico de ámbito en CSS sin BEM, CSS Modules o Shadow DOM. La regla @scope toma un selector de límite superior (la raíz del ámbito, requerido) y un selector de límite inferior opcional (el límite del ámbito). Los estilos dentro de @scope no se filtran fuera del subárbol, y los estilos fuera de @scope no sobrescriben las reglas con ámbito sin una coincidencia de selector intencional. Las reglas con ámbito tienen menor especificidad que las reglas globales sin ámbito, lo que hace que las sobrescrituras sean predecibles e intencionales.
Respuesta rápida
CSS @scope limita las reglas de estilo a un subárbol DOM, previniendo fugas de estilo sin BEM o Shadow DOM. Configure un límite superior (raíz del ámbito) y un límite inferior opcional (límite del ámbito). Las reglas con ámbito tienen menor especificidad que las reglas sin ámbito para sobrescrituras predecibles. Chrome 118+, Safari 17.4+, Firefox 128+ (Baseline 2025).
Last updated: 2026-06-02
Limitaciones
- @scope no crea un nuevo contexto de apilamiento, aislamiento de z-index o contención: solo limita la coincidencia de selectores. Propiedades como z-index, contadores CSS y propiedades personalizadas aún interactúan a través de los límites del ámbito.
- Los selectores de raíz de ámbito demasiado amplios (como una clase común usada en muchos lugares) pueden causar aplicación de estilo inesperada. Cada regla @scope se evalúa para cada elemento que coincide con la raíz del ámbito, por lo que los árboles de ámbito complejos pueden afectar el rendimiento en páginas con muchos elementos DOM.
- En navegadores que no soportan @scope, las reglas dentro de la regla se ignoran completamente, no se des-ambitan. Si se requiere soporte amplio de navegadores, duplique las reglas con ámbito como reglas sin ámbito fuera del bloque @scope como respaldo.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese el selector de raíz del ámbito: el elemento que define el límite superior. Todas las reglas de estilo dentro del bloque @scope se aplican solo dentro del subárbol de este elemento.
- Añada opcionalmente un selector de límite del ámbito: el límite inferior que restringe la profundidad de aplicación de los estilos con ámbito. Las reglas de estilo no se aplican a elementos dentro del límite del ámbito o más profundos.
- Escriba las reglas de estilo CSS dentro del bloque @scope usando sintaxis CSS estándar. Estas reglas tienen menor especificidad que las reglas globales sin ámbito que se dirigen a los mismos elementos.
- Copie el CSS @scope generado y añádalo a su hoja de estilos. Coloque las reglas @scope después de los valores predeterminados globales pero antes de las sobrescrituras específicas de componentes para la cascada más predecible.
Para qué puedes usarla
- Limitar los estilos de un widget a su elemento contenedor para que no se filtren al resto de la página, eliminando la necesidad de nomenclatura BEM en cada elemento.
- Aplicar diferentes estilos de enlace dentro de una barra lateral versus el área de contenido principal sin escribir selectores de mayor especificidad ni usar !important.
- Restringir los estilos de embebidos de terceros a su div contenedor para que el CSS interno del embebido no afecte el diseño de la página circundante.