@scope

Baseline 2026 (Chrome 118, Safari 17.4, Firefox 146 em dezembro de 2025).

Chrome 118Edge 118Safari 17.4Firefox 146

Escopa regras a uma subárvore com um limite inferior opcional ("escopo donut"): `@scope (.card) to (.card-body)` estiliza o chrome do card sem vazar para o conteúdo aninhado. Seletores escopados também usam proximidade, então o escopo mais próximo vence.

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: Entregue os seletores descendentes equivalentes para navegadores mais antigos, ou aceite que o conteúdo aninhado herde o estilo do card.

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

Prompt

Use `@scope (.component) to (.slot)` para estilizar um componente sem afetar o conteúdo aninhado nos seus slots; escreva seletores de elemento curtos dentro do escopo e use `:scope` para a raiz. Prefira isso a seletores descendentes profundos e a classes com hash geradas por pré-processador em sites pequenos.