Is it possible de watch updates on a CSS Variable ?

[Mushr0000m]

I'm quite new to Lit and love it ! For one component that I'm creating it needs to be CSS driven via CSS variables. I'm not sure if there is a way in Lit to listen/watch some changes on CSS variables like we can with HTML properties ?

Thanks !

[e111077]

Lit does not do anything special with CSS variables & custom properties, and unfortunately the web platform does not have the feature to watch CSS custom properties changing.

I'll mark this question as answered since this answers the question directly, but please leave a comment on my response with what you're trying to achieve, because there may be a better way to do what you're trying to do that does not involve listening for custom prop changes.

[justinfagnani]

You can use requestAnimationFrame() and read the computed value then with getComputedStyle()

[Mushr0000m]

Thanks for your reply. I ended up creating a hidden divwhere I apply the css variables and using it as a sensor by listening to its transitionend event. So when some of my css variables changes on this element I can call a refresh of the component manually.

[justinfagnani]

That's an interesting hack!

[Westbrook]

The CSS container query spec intends to add a matchMedia() correlate to the style queries that are hitting browsers right now. I’ve not checked on it’s progress, but if you dive into that and hound some browser implementors you should be able to get more info on an API that would actually be “reactive” for this.