Devtools Picture-in-Picture not Working With `shadowDOMTarget`

[joealden]

Describe the bug

Two recently added devtool features don't seem to play nicely together:

• feat(query-devtools): Add picture-in-picture mode #6931
• fix(devtools): add shadowDOMTarget property to react-query-devtool #7005

When enabling picture-in-picture mode with shadowDOMTarget specified, no styles are applied.

I'm not sure how the picture-in-picture mode is implemented, but maybe it needs to ignore shadowDOMTarget?

Your minimal, reproducible example

None (I don't believe CodeSandbox would be able to show this?)

Steps to reproduce

1. Render the ReactQueryDevtools component.
2. Open the devtools and click the "picture-in-picture" mode button.
3. See that the newly opened devtool window has no styling.

Expected behavior

Styles should be applied as usual.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: Linux
• Browser: Chrome
• Browser Version: 122.0.6261.111

Tanstack Query adapter

react-query

TanStack Query version

5.28.0

TypeScript version

5.4.2

Additional context

No response

[joealden]

cc @ardeora @michelleoj

[ardeora]

Will take a look today and fix it! Thanks for creating an issue ❤️

[ardeora]

This should be fixed in the newer versions (v5.28.3+). Here is a working reproduction! https://stackblitz.com/github/ardeora/react-query-shadow-dom-repro?file=README.md

Let me know if you face any issues!

[joealden]

Works perfectly - thanks for the quick fix!