Intersect question: how to observe many child elements in v-for loop

[jjjsmit]

I am very impressed with Vuetensils. I must compliment you on your succinct and well written code.

I'm evaluating the Intersect directive for a case where there are potentially thousands of child elements rendered in a v-for loop. It appears that Intersect creates a new IntersectionObserver in every child element. As I read the Intersection Observer API docs, the intended pattern is to create an Intersection Observer in the parent and .observe() each of the child elements as a target.

Please correct me if I'm wrong, Could you point me to an example using Intersect in this scenario? Thank you very much.

[AustinGil]

Hey, thank you very much. This is a very good question, but not one I have an answer quite ready for. You are absolutely right that IntersectionObserver is intended to support observing multiple targets. However, I dont think that was my intention with this component. At the time I created it, there wasn't a clear way I could think of to specify which elements to target.

I think it's possible now to provide a CSS style selector as the target and then do a query selector for those, but the support is not currently there.

Could you do me a favor and create a minimal example on Codesandbox and maybe I can work something into the library to support your needs?

[AustinGil]

Thanks for the help here @christophermiles. This is a good solution if the same intersection observer can be used for every intersection event. As a library author, it's hard to do things that way because it's not as flexible. However, it does give me the idea that maybe the user could somehow optionally provide an intersection observer to the library. So if one is provided, it will reuse that one. And if not, it will generate a new one.

Alternatively, I think a good approach is to accept a list of nodes to watch, or a CSS style selector.