Recentemente, o Chromium implementou um novo recurso do HTML5: folhas de estilo com escopo, também conhecidas como
<style scoped>. Um autor da Web pode limitar as regras de estilo para que elas sejam aplicadas apenas a uma parte de uma página definindo o atributo "escopo" em um elemento <style> que seja filho direto do elemento raiz do subárvore em que você quer aplicar os estilos. Isso limita os estilos para afetar apenas o elemento que é o pai do elemento <style> e todos os seus descendentes.
Exemplo
Este é um documento simples que usa o estilo padrão:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
As regras de estilo especificadas vão colorir o texto em qualquer <div> vermelho e em qualquer <span> verde:
uma div uma span
uma div uma span
uma div uma span
No entanto, se definirmos scoped no elemento <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
Ele restringe as regras de estilo para que sejam aplicadas ao <div> de contenção que é o pai do elemento <style scoped> e qualquer coisa dentro desse <div>. Chamamos isso de "escopo", e o resultado é parecido com este:
uma div! uma span!
uma div! uma span!
uma div! uma span!
Isso pode ser feito em qualquer lugar da marcação. Se você quiser, poderá aninhar estilos de escopo em outras partes de escopo da marcação para ter controle detalhado sobre onde os estilos são aplicados.
Casos de uso
Para que serve isso?
Um caso de uso comum é o conteúdo distribuído: quando você, como autor da Web, quer incorporar conteúdo de terceiros, incluindo todos os estilos, mas não quer arriscar esses estilos "contaminando" outras partes não relacionadas da página. Uma grande vantagem é a capacidade de combinar conteúdo de outros sites, como Yelp, Twitter, eBay etc., em uma única página sem precisar isolá-los usando um <iframe> ou editando o conteúdo externo em tempo real.
Se você usa um sistema de gerenciamento de conteúdo (CMS) que envia snippets de marcação que são todos misturados em uma exibição final da página, esse é um ótimo recurso para garantir que cada snippet seja estilizado de forma isolada de qualquer outra coisa na página. Isso também pode ser útil para um wiki.
Quando você quer criar um código de demonstração em uma página, é fácil limitar os estilos apenas ao conteúdo da demonstração. Isso permite que você use o CSS na demonstração, mas nada mais na página será afetado.
Outro caso de uso é simplesmente o encapsulamento: por exemplo, se a página da Web tiver um menu lateral, faz sentido colocar estilos específicos para esse menu em uma seção <style scoped> nessa parte da marcação. Essas regras de estilo não terão nenhum efeito ao renderizar outras partes da página, o que as mantém bem separadas do conteúdo principal.
Um dos casos de uso mais interessantes é o modelo de componente da Web. Os componentes da Web vão ser uma ótima maneira de criar itens como controles deslizantes, menus, seletores de data, widgets de guias etc. Ao fornecer os estilos de escopo, um designer pode criar um widget e empacotá-lo com os estilos como uma unidade independente que outras pessoas podem usar e combinar em um aplicativo da Web avançado. Planejamos usar <style scoped> com muitos componentes da Web e o shadow DOM (que já pode ser ativado definindo a flag experimental "shadow DOM" em chrome://flags). No momento, não há uma maneira muito boa de garantir que os estilos sejam limitados aos componentes da Web sem recorrer a práticas inadequadas, como o estilo inline. Por isso, os estilos de escopo são perfeitos para isso.
Por que incluir o elemento pai?
A maneira mais natural é incluir o elemento pai para que as regras <style scoped> possam, por exemplo, definir uma cor de plano de fundo comum para todo o escopo. Ele também permite que folhas de estilo com escopo sejam escritas de forma "defensiva" para navegadores que ainda não oferecem suporte a <style scoped>, prefixando regras com um ID ou seletor de classe como substituto:
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
Isso imita o efeito de usar estilos quando o "escopo" é implementado, mas com alguma penalidade de desempenho no tempo de execução devido ao seletor mais complexo. A vantagem dessa abordagem é que ela permite uma abordagem de fallback suave até o dia em que o <style scoped> tiver suporte amplo e os seletores de ID possam ser descartados.
Status
Como a implementação de folhas de estilo com escopo ainda é nova, elas estão ocultas por uma flag de execução no Chrome. Para ativar, você precisa ter uma versão do Chrome com o número de versão 19 ou mais recente (no momento, o Chrome Canary). Em seguida, localize a entrada "Ativar <style scoped>" em chrome://flags (perto do final), clique em "Ativar" e reinicie o navegador.
No momento, não há bugs conhecidos, mas @global e versões com escopo de @keyframes e @-webkit-region ainda estão em processo de implementação. Além disso, @font-face é ignorado por enquanto, já que há uma boa chance de que a especificação mude.
Gostaríamos de incentivar todos os interessados no recurso a testá-lo e nos contar sobre suas experiências: o que foi bom, o que foi ruim e (talvez) os bugs.