Accessing Invalid Custom CSS Properties from JavaScript

It is possible to create custom CSS properties using the - prefix. However, can these custom properties be accessed from JavaScript?

The answer is unfortunately no, at least in major browsers like Chrome and Firefox. Custom CSS properties with invalid names are simply ignored by the CSS parser. For instance, consider the following CSS:

div {
    -my-foo: 42;
}

Even if this CSS is applied to a div, attempting to access the -my-foo property using JavaScript will return nothing. The CSSStyleDeclaration object will only contain valid properties, such as width or height.

This behavior is in accordance with the CSSStyleDeclaration specifications. The specs state that the object should only include "specified properties," which implies that custom properties are not recognized. However, some implementations may support accessing custom properties, but this is not guaranteed.

If accessing custom CSS properties is crucial for your application, you can bypass the limitations of JavaScript by parsing the raw CSS text. This can be done using the innerText property of the style element:

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

While this approach works, it is not as straightforward as accessing the properties directly from the CSSStyleDeclaration object. Moreover, it requires additional parsing and manipulation of the CSS text.