:scope, el sujeto implícito y la especificidad cero

La aportación conceptual de @scope no es acotar: es haber separado dos cosas que llevaban veinticinco años soldadas. Hasta ahora, apuntar con precisión a un elemento significaba nombrar a sus ancestros, y nombrar ancestros significaba pesar más en la cascada. Cuanto más exacta era tu regla, más difícil resultaba sobrescribirla. Dentro de un @scope, la restricción de ancestros sale del selector y se va al contexto de la regla, donde no cuenta.

El sujeto implícito

Dentro de un bloque @scope, cada selector se comporta como si llevase :where(:scope) delante.

@scope (.cuerpo-articulo) {
  img { border-radius: 0.5rem; }
}

El selector efectivo de esa regla es :where(:scope) img, donde :scope es la raíz del ámbito. Es decir: una img descendiente de un .cuerpo-articulo.

De ahí salen dos consecuencias inmediatas. La primera es que el prefijo establece una relación de descendencia, así que la raíz no queda cubierta por los selectores desnudos: dentro de @scope (.cuerpo-articulo), un selector .cuerpo-articulo encajaría con un .cuerpo-articulo anidado dentro de otro, no con el propio. La segunda es que el prefijo va envuelto en :where(), que pesa cero, y por tanto la raíz del ámbito no aporta ni un punto de especificidad.

:scope y la raíz explícita

Para estilar el propio elemento raíz hace falta nombrarlo, y para eso está :scope:

@scope (.tarjeta) {
  /* El propio .tarjeta. */
  :scope {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
  }

  /* Descendientes. */
  h3 { margin: 0; font-weight: 600; }

  /* Hijos directos de la raiz. */
  :scope > img { aspect-ratio: 16 / 9; }

  /* La raiz en un estado. */
  :scope:hover { border-color: currentColor; }
}

:scope es una pseudo-clase normal y por tanto sí aporta especificidad de clase, (0,1,0). Esa es la diferencia con el prefijo implícito, que va en :where() y aporta cero. Escrito como tabla:

Elegir entre img y :scope img no es cuestión de gusto: son la misma selección con pesos distintos. Usa la forma desnuda salvo que necesites el punto extra para ganar a otra regla, que casi nunca es el caso.

Especificidad: la diferencia que lo justifica

Compara las dos formas de decir “las imágenes del cuerpo del artículo, dentro de este componente, pero no las de la portada”:

/* Sin ambito: la precision se paga en peso. */
.feature > .cuerpo-articulo > img { border-radius: 0.5rem; }
/* Especificidad (0,2,1). Para sobrescribirla necesitas dos clases y una etiqueta. */

/* Con ambito: la misma precision, el peso de una etiqueta. */
@scope (.feature > .cuerpo-articulo) {
  img { border-radius: 0.5rem; }
}
/* Especificidad (0,0,1). Una sola clase la sobrescribe. */

Las dos apuntan exactamente a los mismos elementos. La primera es casi inamovible; la segunda cede ante cualquier .redondeo-cuadrado { border-radius: 0 } que escriba el consumidor. Y aquí no hay truco ni pérdida: la restricción de ancestros sigue existiendo y sigue siendo obligatoria para que la regla encaje. Simplemente ha dejado de contar en el cómputo.

Eso convierte a @scope en la herramienta correcta para CSS de librería y de sistema de diseño, donde el objetivo permanente es ser preciso y a la vez fácil de sobrescribir. Es el mismo objetivo que perseguía envolver todo en :where(), pero sin tener que envolver nada.

También es la razón por la que @scope y @layer se complementan en lugar de solaparse: la capa decide quién gana entre bloques, y el ámbito decide dónde puede encajar cada regla sin inflar su peso. Un sistema de diseño moderno usa los dos.

Anidamiento dentro del ámbito

El bloque de un @scope admite anidamiento normal, y ahí el & recupera su significado habitual respecto de la regla padre:

@scope (.tarjeta) {
  h3 {
    margin: 0;
    font-weight: 600;

    /* Aqui & es el h3, no la raiz del ambito. */
    &:hover { text-decoration: underline; }
  }

  @container (min-inline-size: 30rem) {
    :scope { grid-template-columns: 12rem 1fr; }
  }
}

Y en la dirección contraria, @scope puede vivir dentro de una regla de estilo, con la raíz expresada en función del padre:

.tarjeta {
  border: 1px solid;

  @scope (&) to (.tarjeta__slot > *) {
    h3 { margin: 0; }
    p { margin-block: 0.5rem; }
  }
}

Esa combinación —el componente declara su ámbito y su suelo dentro de su propio bloque— es probablemente la forma más limpia de escribir un componente en CSS moderno, y no era expresable de ninguna manera hace tres años.