feat(router-devtools): add shadowDOMTarget option to TanStackRouterDevtools and TanStackRouterDevtoolsPanel (#1709)

[reihwald]

Closes #1709

TanStackRouterDevtools before:

TanStackRouterDevtoolsPanel before:

TanStackRouterDevtools after:

TanStackRouterDevtoolsPanel after:

[SeanCassiere]

This needs to be checked locally to make sure there aren't any visual regressions for the existing (non ShadowDOM) users.

[ardeora]

@SeanCassiere Thanks! I will take a look at this tomorrow 😄 (Saturday)

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d837ecb. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 5 targets

• nx affected --targets=test:format,test:eslint,test:unit,test:build,build --parallel=3
• nx run-many --target=test:e2e:replay
• nx affected --target=test:types --exclude=examples/**
• nx affected --target=build --exclude=examples/**
• nx run-many --targets=test:eslint,test:unit,test:types,test:build,build --parallel=3

---

Sent with 💌 from NxCloud.

[reihwald]

@ardeora Should I show you screenshots of the devtools in a no shadow dom setup?

[ardeora]

@SeanCassiere This is looking good! I tested it out with CSR and SSR examples too and the styles are looking to hold up well!

[ardeora]

@SeanCassiere Also the devtoolsPanel styles are broken in the existing implementation. I'll try to fix them in a new PR. This isn't related to the shadow dom changes 😄

[SeanCassiere]

@SeanCassiere Also the devtoolsPanel styles are broken in the existing implementation. I'll try to fix them in a new PR. This isn't related to the shadow dom changes 😄

Is this fine to go through for now?

[ardeora]

Yeah all good to go! Thanks @reihwald for working on this!

[reihwald]

Glad I could help 👍