# @scope

Status: Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 in December 2025).  
Source: https://web.dev/baseline/2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146  
Page: https://designforai.dev/css/scope

Scopes rules to a subtree with an optional lower boundary ("donut scope"): `@scope (.card) to (.card-body)` styles the card chrome without leaking into nested content. Scoped selectors also use proximity, so the nearest scope wins.

## 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: Ship the equivalent descendant selectors for older browsers, or accept that nested content inherits the card style.

## Prompt

Use `@scope (.component) to (.slot)` to style a component without affecting content nested in its slots; write short element selectors inside the scope and use `:scope` for the root. Prefer this to deep descendant selectors and to preprocessor-generated hashed classes for small sites.