Can JavaScript Retrieve Invalid CSS Property Values?

Custom CSS properties, denoted by names prefixed with a dash, offer a mechanism for defining and accessing unique styles within an application. However, can JavaScript access the values of these custom properties if they're invalid or not recognized by the browser?

Explanation

The CSSStyleDeclaration object exposes the style properties of an element in JavaScript. When encountering an invalid property name, such as "-my-foo," this object typically skips the property and proceeds with other valid properties.

The DOM-Level-2 Style specification suggests that all CSS properties within a declaration block should be accessible through the CSSStyleDeclaration interface, including invalid ones. However, in practice, browsers like Chrome and Firefox do not support this behavior.

Despite the lack of direct JavaScript access to the values of invalid CSS properties, an alternative approach involves parsing the raw CSS text. By extracting the style properties from the corresponding style element, you can manually identify and retrieve the value of a custom property, even if it's invalid.

Code Example

The following code demonstrates how to parse the raw CSS text and retrieve the value of the "-my-foo" property:

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\\b${propertyName}:\\s*(. ?)\\b`, "i"))[1];

Note: This approach requires a regular expression to match the custom property name and extract its value. It's considered a low-level solution and may not be the most efficient or appropriate method for all scenarios.