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
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
I will have to consider how users use
I’ll have to extract number values and convert CSS unit values.
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?