heavy hamlet
I have 2 sepatared components like the image attached.
The first column is a group of links and the second column has a component that holds another component in a loop.
I need to watch the second columns elements so that I can check is some elements as inside or outside the viewport, so I can highlight the corresponding link in the left component.
How can I do this communication using .astro components?
distant mesa
Sounds like you want the intersection observer API (not an astro thing)
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Though I feel like you could probably achieve your desired effect via CSS with some combination of position sticky and has() though I'm not sure exactly what that would look like off the top of my head
heavy hamlet
Would it work across different Astro components?
Would I need to have kind of a "global" js outside of both components in order to watch both of them?
distant mesa
No you would only need to observer the right column (or most likey the items within the column), and then use that info to highlight the correct item in the left column
heavy hamlet
Even though they are in different componets?
In other frameworks I'd need to emmit some event from one component so the other could listern to it.
distant mesa
Right, that's what the scroll observer is for