A way to observe changes in CSS custom properties

trusktr · 2018-05-07

I have custom elements that render with WebGL, and I’d like for them to be stylable with CSS. So what I’d like is to be able to observe changes to properties like --material, --material-color, etc.

Setting properties with CSSStyleDeclaration.setProperty(), is easy, and for normal elements that render with CSS, no observation is needed.

But because I refer with WebGL, I need to observe the properties so I can apply then to WebGL outside of CSS.

How can I do this?

Right now I believe the only way is to monkey-patch CSSStyleDeclaration.setProperty() so that anytime I detect that the property being set is one that I care about, I can then find all elements that match the selector, and do what I need (update the WebGL drawing).

I would also need to detect if the declaration is on an element vs in a style sheet, so I can update rendering for that element and not need to run a selector.

I would have to monkey-patch HTMLElement.style.

I will have to consider how users use !important.

I’ll have to extract number values and convert CSS unit values.

Etc…

It would be great if there were a built-in way to observe changes to rules of a stylesheet, or to rules of an element’s computed style.

Is there an API for this being planned anywhere?

MaxArt · 2018-05-14

Monkey-patching setProperty would be a very poor choice, as property values can change merely by changing a CSS class. Currently, there’s no way to detect when a custom property’s value changes because it would be not very clear or too computationally intensive (i.e. it could trigger too many events).

A dirty trick would involve the transitionend property with a 1ms transition on any transition-able property using var(--custom-property), but that would only work on transition-able values too. And it would have a 1ms delay.

I think a well-targeted observer would be the optimal solution. I wonder if MutationObserver could be extended to support specific style properties…

trusktr · 2018-05-14

as property values can change merely by changing a CSS class.

True. In this case, MutationOberver on the class attribute can be used, but then the element has to be needlessly checked just to see if some property changed. It could also be possible to watch a style element’s textContent with a MutationOberver, and detect changes all at once (use the selector to find matching elements and trigger logic on them).

There’s lots of ways to do this, none of which are ideal.

xzyfer · 2018-05-15

Another consideration is that the value of a custom property for an element could change without modifying the class name or style directly i.e. media queries

trusktr · 2018-05-16

Good observation. This thread will become a good list of all the things that we’d need a code path for.

Another consideration is that custom properties (the ones not made using CSS.registerProperty) are always inherited, so if we want the properties to affect only elements that the properties are targetting (and if CSS.registerProperty is not supported) we’ll have to write even more logic to handle that case.

It’s gonna get really messy, and introduce lots of surface area for edges cases and bugs.

cicciosgamino · 2021-12-28

So actually neaar starting 2022 there is no way to detect a change in css custom vars on DOM element with MutationObserver ??

trusktr · 2022-09-16

Yeah. A new StyleObserver API with similar shape as Mutation/ResizeOberver could be useful.

Here is my list of things to do to be able to catch all the cases that can change an element’s style:

github.com/lume/lume

Styling 3D elements with CSS!

opened 06:04AM - 31 Dec 17 UTC

trusktr

enhancement API

We can get values from custom properties via JS, like so: https://developer.mozi…lla.org/en-US/docs/Web/CSS/Using_CSS_variables#Values_in_JavaScript We can let attribute values have higher specificity. This means we'll be able to do something like this: ```html <style> i-mesh { --geometry: box 20 30 40; --material: phong; --material-opacity: 0.5; --color: rgb(255, 0, 0); /* all meshes are red ... */ --rotation: 30 30 30; /* give the same rotation to all meshes! */ } i-mesh.brick { --material-texture: url('path/to/brick.png'); /* ... but i-mesh elements with class .brick have a brick texture. */ } </style> ``` This will be an interesting way to separate structure from styling, and making 3D scenes themable!! We could even apply behaviors via CSS, for example it could look like this: ```html <style> /* by default i-node elements don't have geometry/material, so let's give it to them: */ i-node { --has: mesh normal-material torus-geometry; --size: 40 40 40; --material-opacity: 0.5; } </style> ``` This will be powerful!!!! We'll be able to write simple HTML where some properties we want to be per-object-specific, and other properties we want to be applied to many objects: ```html <i-mesh class="pine-tree" position="20 30 40"></i-mesh> <i-mesh class="pine-tree" position="30 40 50"></i-mesh> <i-mesh class="pine-tree" position="40 50 60"></i-mesh> <i-mesh class="pine-tree" position="50 60 70"></i-mesh> <i-mesh class="pine-tree" position="60 70 80"></i-mesh> <i-mesh class="pine-tree" position="70 80 90"></i-mesh> <i-mesh class="pine-tree" position="80 90 100"></i-mesh> ``` then specify a geometry (that we've registered) and material, **for all the meshes at once**, using CSS: ```css /* ... but each pine-tree mesh has some specific pine-tree styling: */ i-mesh.pine-tree { --has: pine-tree-geometry mtl-material; --size: 30 40 50; --material-mtl: url('path/to/pine-tree.mtl'); /* etc ... */ } ``` OH YEASS!!!!!!!!

Please lete know if anything is missing. Then we can polyfill a StyleObserver API.

rajsite · 2023-04-19

Interested in this as well! We have a web component that is rendered as a canvas (a plot) and would like it to be aware of the value of the CSS custom properties on the element. An observer that runs when styles have changed such that I can call getComputedStyle on an element without forcing style re-calc or layout would help observe the current value without a performance penalty.