@scope para estilos com escopo

A regra @scope (Chrome 118+, Safari 17.4+) limita as regras CSS a uma subárvore específica do DOM. As regras dentro de @scope só se aplicam a elementos dentro da raiz de escopo declarada, evitando o vazamento de estilos entre componentes.

Declare um escopo com um seletor de raiz do escopo. Todas as regras internas se aplicam apenas a descendentes de raízes de escopo correspondentes — não ao documento inteiro.

A raiz do escopo (@scope (.card)) define o ponto de entrada. Os elementos dentro do escopo que correspondem a .title recebem estilos. Os elementos fora de .card com a classe .title não são afetados — verdadeiro encapsulamento de estilos sem Shadow DOM.

Opcionalmente, defina um limite de escopo com to: @scope (.card) to (.nested-card). As regras se aplicam dentro de .card, mas param nos descendentes de .nested-card — restringindo os estilos a um nível de aninhamento de componentes e excluindo instâncias mais profundas.

Dentro de um bloco @scope, :scope refere-se ao próprio elemento raiz do escopo. @scope (.card) { :scope { border-radius: 8px; } } estiliza diretamente o elemento .card, não seus descendentes.

@scope introduz especificidade baseada em proximidade: quando vários escopos correspondem a um elemento, vence a raiz de escopo ancestral mais próxima — independentemente da especificidade do seletor. Isso impede que estilos de componentes profundamente aninhados sejam substituídos por estilos de escopos ancestrais distantes.

Os módulos de CSS geram nomes de classes exclusivos com hash para obter escopo no momento da compilação — uma preocupação do empacotador de JavaScript. @scope obtém escopo nativamente no navegador, sem ferramentas de compilação, nomes com hash ou sintaxe específica de estruturas — CSS puro.

O DOM de sombra cria isolamento completo de estilos — estilos externos não conseguem penetrá-lo. @scope cria isolamento parcial — estilos externos ainda podem alcançar elementos dentro do escopo se tiverem especificidade suficiente. @scope é uma alternativa mais leve para definir o escopo de componentes sem isolamento completo.

Combine @scope com @layer para obter um controle detalhado da cascata: defina estilos com escopo de componente em uma camada do componente. Assim, a ordem da cascata (por meio das camadas) e o escopo dos estilos (por meio de @scope) são gerenciados de forma combinável, sem malabarismos com nomes de classes.

Componentes de um sistema de design: delimite o escopo de todos os estilos de botões com @scope (.button-group) para que os estilos dos botões internos nunca vazem para fora. Isolamento de widgets: delimite o escopo dos estilos de um widget de terceiros ao seu contêiner, evitando conflitos com os estilos globais da página.

@scope é compatível com Chrome 118+, Safari 17.4+ e Firefox 128+. Em navegadores sem suporte, os estilos dentro de @scope são ignorados — a cascata recorre aos estilos globais. Use @scope como aprimoramento progressivo quando definir o escopo de componentes for útil, mas não essencial.

Que problema @scope resolve e que é difícil abordar apenas com os seletores tradicionais de CSS?

@scope limita a aplicação das regras de CSS a uma subárvore declarada do DOM, permitindo o encapsulamento nativo de estilos sem DOM de sombra nem geração de hashes para classes por ferramentas de compilação. Os limites de escopo, a especificidade por proximidade e a integração com @layer fazem dele um recurso primitivo poderoso para sistemas de design com escopo de componentes em CSS puro.