Skip to content
This repository has been archived by the owner on Apr 4, 2022. It is now read-only.

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

Open
hmans opened this issue Jan 13, 2021 · 2 comments
Open

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

hmans opened this issue Jan 13, 2021 · 2 comments
Labels

Comments

@hmans
Copy link
Owner

hmans commented Jan 13, 2021

...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.

@hmans hmans added enhancement New feature or request research and removed enhancement New feature or request labels Jan 13, 2021
@CodyJasonBennett
Copy link
Contributor

CodyJasonBennett commented Jan 19, 2021

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
Copy link
Owner Author

hmans commented Jan 19, 2021

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants