Scroll to top behaviour in a shadow DOM
Hello 👋
I am trying to make the
scrollToTopSelectors router option work in my app but without success.
I tracked it down the fact that my selector points to an element that is inside a shadow DOM (because we are using a micro-frontend architecture and the micro-frontend is responsible for the scroll), thus document.querySelector resolves to null (code)
I would like to know what my options are (if any) to make the scroll to top behaviour work?
Thank you 🙂30 Replies
optimistic-gold•7mo ago
how could the element be found then?
using which query
crude-lavenderOP•7mo ago
As far as I know, finding an element inside a shadow DOM implies knowing who the shadow root's parent is, e.g.
optimistic-gold•7mo ago
so you'd probably need some arbitrary callback then
where you can execute that
I guess we could add that
crude-lavenderOP•7mo ago
I guess so yes 🙂
At this point I'm wondering if:
1. I should handle the scroll to top by myself by listening to router events?
2. we could/should extend the
scrollToTopSelectors API to allow for elements' getters (for example)optimistic-gold•7mo ago
both possible yes
a router event is most flexible I guess
crude-lavenderOP•7mo ago
If I were to do that in user-land, could it conflict with the scroll restoration mechanism? (if enabled)
If so, it might not be as easy to implement would it? and it'd be better handled internally by the router
optimistic-gold•7mo ago
we would need to try this out
probably best to enhance the scrollToTop API
crude-lavenderOP•7mo ago
Yeah, doesn't seem like too big of a change either
optimistic-gold•7mo ago
maybe we just allow, in addition to a string selector, a function to be passed in that returns an element?
crude-lavenderOP•7mo ago
That was what I had in mind yes
optimistic-gold•7mo ago
interested in building this as a PR?
crude-lavenderOP•7mo ago
I think I would 🙂
optimistic-gold•7mo ago
cool
give it a go and I'll review then
crude-lavenderOP•7mo ago
Perfect then, thanks for your time 🙂
Is
main the branch I should point the PR to?optimistic-gold•7mo ago
yes
we'll merge main to alpha later then
crude-lavenderOP•7mo ago
Got it
Here's the PR: https://github.com/TanStack/router/pull/4281
Let me know if there's anything else I can do 🙂
Thanks again!
optimistic-gold•7mo ago
we need to update the solid router docs as well
crude-lavenderOP•7mo ago
How so?
optimistic-gold•7mo ago
this docs/router/framework/react/guide/scroll-restoration.md needs to be applied to docs/router/framework/solid/guide/scroll-restoration.md
but I see the solid docs are not up-to-date here at all
let's do this separately then
crude-lavenderOP•7mo ago
Yeah, I'm not seeing much in the Solid docs
optimistic-gold•7mo ago
btw we need to merge this as a fix... since otherwise the alpha branch is not pointing to minor that is higher than main and this will lead to issues when installing alpha
crude-lavenderOP•7mo ago
Sure, whatever works best for you 🙂
Should I change something?
optimistic-gold•7mo ago
no
all good
i merged it
thanks a lot for your contribution!
crude-lavenderOP•7mo ago
Cool, thank you for your time 🙂
optimistic-gold•7mo ago
are you on main or alpha?
just want to know if we should merge to alpha right away or if you don't need that
crude-lavenderOP•7mo ago
You mean the package version I'm currently using?
^1.120.10 so main?optimistic-gold•7mo ago
yep
good so won't merge immediately to alpha
crude-lavenderOP•7mo ago
Just tried it with the
pkg.pr version and it works great tho, thanks 🙂optimistic-gold•7mo ago
it's released now
usually automatic released after merging to main
here a flaky test failed so I had to retrigger
crude-lavenderOP•7mo ago
Okay, thanks!