TanStackRouterDevtools broken when rendering inside of a shadow DOM

[reihwald]

Describe the bug

I'm using Tanstack Query and Router inside of a shadow DOM. The Query devtools have a shadowDOMTarget option that makes it possible to render them correctly. The Router devtools sadly lack such an option which makes them pretty much unusable.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-3rsmfi?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

Just launch the project. The broken devtools are instantly visible as the hiding/showing doesn't work.

Expected behavior

As a developer, I expect to be able to use the devtools when rendering my React app inside of a shadow DOM.

Screenshots or Videos

Platform

• OS: Windows
• Browser: Chrome
• Version: 125

Additional context

No response

[reihwald]

query-devtools/src/Devtools.tsx and router-devtools/src/devtools.tsx look similar. Should I create a PR similar to this one?

[SeanCassiere]

@reihwald feel free to take a stab at it! 🙌🏼