Acceso a propiedades CSS personalizadas no válidas desde JavaScript

Es posible crear propiedades CSS personalizadas utilizando el prefijo -. Sin embargo, ¿se puede acceder a estas propiedades personalizadas desde JavaScript?

Lamentablemente, la respuesta es no, al menos en los principales navegadores como Chrome y Firefox. El analizador de CSS simplemente ignora las propiedades CSS personalizadas con nombres no válidos. Por ejemplo, considere el siguiente CSS:

div {
    -my-foo: 42;
}

Incluso si este CSS se aplica a un div, intentar acceder a la propiedad -my-foo usando JavaScript no devolverá nada. El objeto CSSStyleDeclaration solo contendrá propiedades válidas, como ancho o alto.

Este comportamiento está de acuerdo con las especificaciones de CSSStyleDeclaration. Las especificaciones establecen que el objeto sólo debe incluir "propiedades especificadas", lo que implica que no se reconocen las propiedades personalizadas. Sin embargo, algunas implementaciones pueden admitir el acceso a propiedades personalizadas, pero esto no está garantizado.

Si el acceso a propiedades CSS personalizadas es crucial para su aplicación, puede evitar las limitaciones de JavaScript analizando el texto CSS sin formato. Esto se puede hacer usando la propiedad InnerText del elemento de estilo:

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

Si bien este enfoque funciona, no es tan tan sencillo como acceder a las propiedades directamente desde el objeto CSSStyleDeclaration. Además, requiere análisis y manipulación adicionales del texto CSS.