@scope

Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 en diciembre de 2025).

Chrome 118Edge 118Safari 17.4Firefox 146

Acota reglas a un subárbol con un límite inferior opcional ("scope en dónut"): `@scope (.card) to (.card-body)` estiliza el marco de la tarjeta sin filtrarse en el contenido anidado. Los selectores con scope también usan proximidad, así que gana el scope más cercano.

Card title

Nested heading keeps its own style

CSS

.fx-030{border:1px solid #ddd;border-radius:10px;padding:16px;font-family:system-ui}
@scope (.fx-030) to (.fx-030-body){
  h3{margin:0 0 8px;color:#2563eb;font-size:1.2rem}
  :scope{background:#fafafa}
}
.fx-030-body{padding:12px;background:#fff;border-radius:8px}

HTML

<article class="fx-030">
  <h3>Card title</h3>
  <div class="fx-030-body"><h3>Nested heading keeps its own style</h3></div>
</article>

Fallback: Sirve los selectores descendientes equivalentes para navegadores antiguos, o acepta que el contenido anidado herede el estilo de la tarjeta.

Fuente: web.dev/baseline/2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146

Prompt

Usa `@scope (.component) to (.slot)` para estilizar un componente sin afectar al contenido anidado en sus slots; escribe selectores de elemento cortos dentro del scope y usa `:scope` para la raíz. Prefiérelo a los selectores descendientes profundos y a las clases con hash generadas por preprocesador en sitios pequeños.