Custom property enumeration in getComputedStyle()

concepts

1. Custom Property Enumeration

   Iterate a live CSSStyleDeclaration in the page and watch --brand-primary, --grid-gutter and friends show up in the enumeration — and in .length — for the first time.

2. Design Token Extractor

   The pre-141 workaround required crawling document.styleSheets and skipping cross-origin sheets — and even then you couldn't get the cascaded value for a specific node. This concept extracts tokens scoped to :root, body, or a component element so you can compare what the old way could and couldn't see.

3. Inheritance Inspector

   Click any element in the stage to enumerate its resolved custom properties and diff them against the parent — modelling the per-element capture that libraries like html2canvas and html-to-image need.

4. CSS Custom Property Cascade Debugger

   Three nested divs (grandparent → parent → child) with inspectable custom properties. Click any level to see ALL custom properties via getComputedStyle — including inherited ones. A diff view highlights what was set at each level vs inherited. Add properties live and watch them cascade down.

5. Theme Snapshot

   Click any of three themed components to enumerate all their CSS custom properties via getComputedStyle() — no stylesheet crawling. Properties are grouped by prefix (--color-*, --spacing-*, etc.) with colour swatches. Export as a :root CSS variables block. Demonstrates the Chrome 141 fix: total style.length and the for...of iterator now include custom properties.

why it shipped

When iterating over window.getComputedStyle(element) in Chromium, there is a bug where it forgets to include any custom properties set on the element. (length() on the returned object forgets to account for the number of custom properties set.) We would like to fix this bug; it brings us closer to web standards, and to Firefox and Safari, which have never ha

references

• ChromeStatus entry
• Spec