@Scope | CSS

• @Scope | CSS

---

🧠 O que é @scope

@scope cria um escopo de estilos limitado a uma parte específica do HTML, como se fosse um mini CSS local.

Ou seja:

Com @scope, as regras de CSS só se aplicam a elementos dentro de um seletor específico.

---

⚙️ Sintaxe

@scope (<seletor-de-início>) {
  /* estilos que só valem dentro desse seletor */
}

ou de forma mais avançada:

@scope (<seletor-de-início>) to (<seletor-de-fim>) {
  /* estilos só valem entre esses dois elementos */
}

---

🎨 Exemplo básico

<article class="post">
  <h2>Título do post</h2>
  <p>Conteúdo do artigo.</p>
</article>

<section class="newsletter">
  <h2>Assine a newsletter</h2>
</section>

/* Escopo: só afeta o h2 dentro de .post */
@scope (.post) {
  h2 {
    color: blue;
  }
}

➡️ Resultado:

• O <h2> dentro de .post fica azul 💙
• O <h2> da .newsletter não é afetado.

---

🧩 Exemplo mais avançado: to()

Você também pode limitar o escopo até um elemento final:

@scope (.container) to (.footer) {
  p {
    color: green;
  }
}

👉 Nesse caso, os parágrafos serão verdes apenas entre .container e .footer no DOM.

---

💡 Vantagens

✅ Isolamento real de estilos — sem precisar de frameworks ou CSS Modules. ✅ Evita conflitos de nomes (ex: .button dentro de um card e dentro de um modal podem ter estilos diferentes). ✅ Mais previsível — você controla onde os estilos valem.

---

⚠️ Limitações

🚧 Ainda é experimental — suporte parcial nos navegadores (Chrome e Edge modernos já suportam; Safari e Firefox ainda em implementação). 🚫 Não substitui completamente :scope (o seletor), que tem outra função. 🚫 Ainda não funciona com todos os recursos do Tailwind ou pré-processadores.

---

🧠 Comparação com outras abordagens

Método	Escopo local?	Precisa JS?	Suporte
@scope	✅ Sim	❌ Não	🧪 Experimental
CSS Modules	✅ Sim	✅ Sim (build)	✅
Shadow DOM	✅ Sim	✅ Sim (Web Components)	✅
CSS tradicional	❌ Não	❌ Não	✅

---

🧱 Exemplo prático completo

<div class="card">
  <h2>Título do Card</h2>
  <button>OK</button>
</div>

<div class="modal">
  <h2>Título do Modal</h2>
  <button>OK</button>
</div>

@scope (.card) {
  h2 {
    color: blue;
  }
  button {
    background: lightblue;
  }
}

@scope (.modal) {
  h2 {
    color: red;
  }
  button {
    background: pink;
  }
}

👉 Resultado:

• Dentro do .card, o botão fica azul-claro e o título azul.
• Dentro do .modal, o botão fica rosa e o título vermelho. Tudo isso sem conflito de CSS entre os dois.

---

✅ Resumo rápido

Conceito	Explicação
@scope	Cria um escopo local de CSS
Sintaxe	@scope (.classe) { … }
Serve para	Evitar conflitos de estilos entre componentes
Vantagem	Isolamento sem JavaScript ou build
Estado atual	Experimental (Chrome/Edge já suportam)