demo · v141

Inheritance Inspector

Click any element in the stage. The table fills with every cascaded custom property that resolves on it — yours and inherited — with the cascaded values resolved for that specific node. The same enumeration on the parent shows what changed, so you can debug variable inheritance without DevTools.

checking support…
no element picked

panel A — defines --panel-accent: emerald, --panel-pad: 1rem

card inside A — overrides --panel-accent: rose and adds --card-pad

panel B — inline-overrides --panel-accent to blue

card inside B — should still get blue inherited

propertyvalue on pickedvalue on parentorigin

the call

function enumerateTokens(el) {
  const cs = getComputedStyle(el);
  const out = new Map();
  for (const prop of cs) {                       // Chrome 141: --* now appear here
    if (prop.startsWith("--")) {
      out.set(prop, cs.getPropertyValue(prop).trim());
    }
  }
  return out;
}

function diffWithParent(el) {
  const here = enumerateTokens(el);
  const above = el.parentElement ? enumerateTokens(el.parentElement) : new Map();
  return [...here].map(([k, v]) => ({ k, v, parent: above.get(k), changed: above.get(k) !== v }));
}

why this angle

The intent-to-ship discussion called out html2canvas and html-to-image as libraries that already enumerate computed styles and were missing custom-property data. Those libraries care about a different thing than design-token tooling: per-element resolved value, including inherited cascades, so they can faithfully replicate the rendered state to a canvas or SVG. This picker simulates that workflow — click anything and see the resolved cascade for that exact node, alongside its parent to highlight what changed.

see also