# @scope

Status: Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 im Dezember 2025).  
Quelle: https://web.dev/baseline/2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/146  
Seite: https://designforai.dev/de/css/scope

Begrenzt Regeln auf einen Teilbaum mit optionaler unterer Grenze ("Donut-Scope"): `@scope (.card) to (.card-body)` stylt das Karten-Chrome, ohne in verschachtelten Inhalt zu lecken. Gescopte Selektoren nutzen auch Nähe, sodass der nächste Scope gewinnt.

## 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: Liefere die entsprechenden Nachfahrenselektoren für ältere Browser aus oder akzeptiere, dass verschachtelter Inhalt den Kartenstil erbt.

## Prompt

Nutze `@scope (.component) to (.slot)`, um eine Komponente zu stylen, ohne Inhalt in ihren Slots zu beeinflussen; schreibe kurze Elementselektoren innerhalb des Scopes und nutze `:scope` für die Wurzel. Bevorzuge das gegenüber tiefen Nachfahrenselektoren und präprozessorgenerierten Hash-Klassen für kleine Seiten.