No início deste mês, eu estava implementando um lightbox para devtoolstips.org usando <dialog>. Estarei escrevendo sobre isso em breve, mas você pode encontrar a implementação nesse link, é notável como você precisa de pouco código. Ao estilizar, usei as propriedades personalizadas do CSS que já estavam definidas no CSS para estilizar a caixa de diálogo e seu pano de fundo. Ou então eu pensei.
Por alguma razão, a cor do pano de fundo não era o que eu esperava, mesmo que o devtools tenha escolhido o css var correto sendo definido. Só que o CSS var não foi definido. Isso me intrigou porque foi claramente definido anteriormente no CSS sob o :rootseletor. Então, por que os devtools não conseguiram encontrá-lo?
Acontece ::backdropque não herda de lugar nenhum. Diz isso claramente na especificação :
“Ele não herda de nenhum elemento e não é herdado.”
E honestamente, isso é muito chato. Você terá que duplicar seus vars em uma declaração específica para ::backdrop, ou adicionar ::backdropà sua :rootdeclaração contendo todos os seus vars CSS:
:is(:root, ::backdrop) {
--my-var-1: #fff;
--my-var-2: #000;
}Se você usar :rootapenas para definir variáveis CSS, isso não é um grande problema, mas como ele tem como alvo o htmlelemento de qualquer maneira, geralmente também adiciono meu estilo de página imediatamente.
Ambos os elementos ::beforee ::afterpseudo se comportaram assim no passado, embora tenham sido atualizados, e não sei por que o mesmo não foi feito para ::backdrop, parece um descuido.
De qualquer forma, Florens teve a ideia de introduzir um :globalThisem CSS, semelhante ao globalThisJavaScript, que sempre se refere ao ambiente global, seja ele window, globalou qualquer outra coisa. Essa seria uma ótima solução para o caso de uso de propriedades personalizadas do CSS que você deseja disponibilizar em todo o seu CSS. Podemos sonhar.
De qualquer forma, agora você sabe que deve ficar atento a essa situação.