# @scope

Estado: Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 en diciembre de 2025).  
Fuente: https://web.dev/baseline/2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146  
Página: https://designforai.dev/es/css/scope

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.

## HTML

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

## CSS

```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}
```

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

## 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.