Acessando propriedades CSS personalizadas inválidas a partir de JavaScript

É possível criar propriedades CSS personalizadas usando o prefixo -. No entanto, essas propriedades personalizadas podem ser acessadas a partir de JavaScript?

A resposta infelizmente é não, pelo menos nos principais navegadores como Chrome e Firefox. Propriedades CSS personalizadas com nomes inválidos são simplesmente ignoradas pelo analisador CSS. Por exemplo, considere o seguinte CSS:

div {
    -my-foo: 42;
}

Mesmo que este CSS seja aplicado a uma div, tentar acessar a propriedade -my-foo usando JavaScript não retornará nada. O objeto CSSStyleDeclaration conterá apenas propriedades válidas, como largura ou altura.

Esse comportamento está de acordo com as especificações CSSStyleDeclaration. As especificações afirmam que o objeto deve incluir apenas “propriedades especificadas”, o que implica que as propriedades personalizadas não são reconhecidas. No entanto, algumas implementações podem oferecer suporte ao acesso a propriedades personalizadas, mas isso não é garantido.

Se o acesso às propriedades CSS personalizadas for crucial para seu aplicativo, você pode contornar as limitações do JavaScript analisando o texto CSS bruto. Isso pode ser feito usando a propriedade innerText do elemento de estilo:

document.getElementsByTagName("style")[0].innerText

Embora essa abordagem funcione, não é tão tão simples quanto acessar as propriedades diretamente do objeto CSSStyleDeclaration. Além disso, requer análise e manipulação adicionais do texto CSS.