Estilos reutilizáveis perfeitos.
As folhas de estilo construíveis são uma maneira de criar e distribuir estilos reutilizáveis ao usar o Shadow DOM.
Sempre foi possível criar folhas de estilo usando JavaScript. No entanto,
o processo sempre foi criar um elemento <style>
usando
document.createElement('style')
e acessar a propriedade da página dele para ter
uma referência à instância
CSSStyleSheet
de base. Esse método pode produzir código CSS duplicado e o excesso de conteúdo,
e o ato de anexar leva a um flash de conteúdo sem estilo, mesmo que
não haja excesso. A interface CSSStyleSheet
é a raiz de um conjunto de interfaces de representação CSS conhecidas como CSSOM, oferecendo uma maneira programática de manipular folhas de estilo, além de eliminar os problemas associados ao método antigo.
As folhas de estilo construíveis permitem definir e preparar estilos de CSS compartilhados e, em seguida, aplicar esses estilos a várias raízes shadow ou ao documento com facilidade e sem duplicação. As atualizações em uma CSSStyleSheet compartilhada são aplicadas a todas as raízes em que ele foi adotado. A adoção de uma folha de estilo é rápida e síncrona depois que a planilha é carregada.
A associação configurada pelas folhas de estilo construíveis funciona bem com várias aplicações diferentes. Ele pode ser usado para fornecer um tema centralizado
usado por muitos componentes: o tema pode ser uma instância CSSStyleSheet
transmitida a
componentes, com atualizações que se propagam para os componentes
automaticamente. Ele pode ser usado para distribuir valores da propriedade personalizada
de CSS para
subárvores do DOM específicas sem depender da
cascade. Ela pode até ser usada como uma interface direta para o analisador de CSS do navegador, facilitando o pré-carregamento das folhas de estilo sem injetá-las no DOM.
Como criar uma folha de estilo
Em vez de introduzir uma nova API para fazer isso, a especificação Stylesheets construíveis possibilita a criação imperativa de folhas de estilo invocando o construtor CSSStyleSheet()
. O objeto CSSStyleSheet resultante tem dois novos métodos que tornam mais seguro adicionar e atualizar regras de folha de estilo sem acionar o Flash of Unstyled Content (FOUC, na sigla em inglês).
Os métodos replace()
e replaceSync()
substituem a folha de estilo por uma string de CSS, e replace()
retorna uma promessa. Em ambos os casos, as referências da folha de estilo externa não são aceitas. Qualquer regra @import
será ignorada e produzirá um aviso.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// replace all styles:
sheet.replace('a { color: blue; }')
.then(() => {
console.log('Styles replaced');
})
.catch(err => {
console.error('Failed to replace styles:', err);
});
// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."
Usando folhas de estilo criadas
O segundo novo recurso introduzido pelo "Buildable StyleSheet" é uma propriedade
adoptedStyleSheets
disponível nas APIs Shadow
Roots
e Documents (links em inglês). Isso nos permite aplicar explicitamente os estilos definidos por um CSSStyleSheet
a uma determinada subárvore do DOM. Para isso, definimos a propriedade como uma matriz de uma ou mais folhas de estilo para aplicar a esse elemento.
// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');
// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);
// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
Como tudo funciona em conjunto
Com as folhas de estilo construíveis, os desenvolvedores Web agora têm uma solução explícita para criar folhas de estilo CSS e aplicá-las a árvores do DOM. Temos uma nova API baseada em promessas para carregar StylePlanilhas a partir de uma string de fonte CSS que usa o analisador integrado e a semântica de carregamento do navegador. Por fim, temos um mecanismo para aplicar atualizações da folha de estilo a todos os usos de uma folha de estilo, simplificando itens como mudanças de tema e preferências de cor.
No futuro
A versão inicial das folhas de estilo construíveis que vem com a API descrita aqui, mas ainda estamos trabalhando para facilitar o uso. Há
uma proposta para estender
o adoptedStyleSheets
FrozenArray com métodos dedicados para inserir e
remover folhas de estilo, o que eliminaria a necessidade de clonagem de matriz e evitaria
possíveis referências de folha de estilo duplicadas.