search

hmans / three-elements

Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
https://three-elements.hmans.co
MIT License
398 stars 14 forks source link

Find a way to react on "display: none" and related style changes #12

Open hmans opened 3 years ago

hmans commented 3 years ago

...because some frameworks make use of this (eg Alpine.js), and it would be cool to have our elements react to this category of style changes.

CodyJasonBennett commented 3 years ago

To sync three events with this style, we'd have to toggle their events by not raycasting hidden elements. Not sure what else other than only traversing visible elements internally.

hmans commented 3 years ago

To sync three events with this style, we'd have to toggle their events by not raycasting hidden elements.

Yup, and probably a lot of other things! The first challenge is figuring out a good way to actually interact with the styles set on an element. I haven't tested this yet, but I'm assuming that the modification of a property of the style property -- like element.style.display = "none" -- will never trigger our attributeChangedCallback.

The most naive implementation I could think of would involve checking the property on every frame, but I'm not sure about the performance ramifications.

Maybe it might be possible to wrap an element's style property in a Proxy instance after instantiation?

Either way, I intend to do some experimenting with these ideas some time soon, once I find the time.