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
conscious-sapphire•4mo ago
how could the element be found then?
using which query
harsh-harlequinOP•4mo ago
As far as I know, finding an element inside a shadow DOM implies knowing who the shadow root's parent is, e.g.
conscious-sapphire•4mo ago
so you'd probably need some arbitrary callback then
where you can execute that
I guess we could add that
harsh-harlequinOP•4mo 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)conscious-sapphire•4mo ago
both possible yes
a router event is most flexible I guess
harsh-harlequinOP•4mo 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
conscious-sapphire•4mo ago
we would need to try this out
probably best to enhance the scrollToTop API
harsh-harlequinOP•4mo ago
Yeah, doesn't seem like too big of a change either
conscious-sapphire•4mo ago
maybe we just allow, in addition to a string selector, a function to be passed in that returns an element?
harsh-harlequinOP•4mo ago
That was what I had in mind yes
conscious-sapphire•4mo ago
interested in building this as a PR?
harsh-harlequinOP•4mo ago
I think I would 🙂
conscious-sapphire•4mo ago
cool
give it a go and I'll review then
harsh-harlequinOP•4mo ago
Perfect then, thanks for your time 🙂
Is
main the branch I should point the PR to?conscious-sapphire•4mo ago
yes
we'll merge main to alpha later then
harsh-harlequinOP•4mo 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!
conscious-sapphire•4mo ago
we need to update the solid router docs as well
harsh-harlequinOP•4mo ago
How so?
conscious-sapphire•4mo 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
harsh-harlequinOP•4mo ago
Yeah, I'm not seeing much in the Solid docs
conscious-sapphire•4mo 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
harsh-harlequinOP•4mo ago
Sure, whatever works best for you 🙂
Should I change something?
conscious-sapphire•4mo ago
no
all good
i merged it
thanks a lot for your contribution!
harsh-harlequinOP•4mo ago
Cool, thank you for your time 🙂
conscious-sapphire•4mo 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
harsh-harlequinOP•4mo ago
You mean the package version I'm currently using?
^1.120.10 so main?conscious-sapphire•4mo ago
yep
good so won't merge immediately to alpha
harsh-harlequinOP•4mo ago
Just tried it with the
pkg.pr version and it works great tho, thanks 🙂conscious-sapphire•4mo ago
it's released now
usually automatic released after merging to main
here a flaky test failed so I had to retrigger
harsh-harlequinOP•4mo ago
Okay, thanks!