Observing CSS custom properties

This is a little hack that allows JS to react to changes in custom properties.

It uses style queries to alter the size of a shadow DOM element, and a resize observer picks up that change.

Due to style query support, this only works in Chrome 111+ and Safari 18+.

Demo

…loading…

Use devtools to change the value of --foo.

View source.