fix(query-devtools): Fix PiP mode styles with shadow dom (#7112)

Author: ardeora

examples/react/shadow-dom/src/DogList.tsx

@@ -27,7 +27,7 @@ export const DogList = () => {
   return (
     <div>
       {dogs.map((dog) => (
-        <div>{dog}</div>
+        <div key={dog}>{dog}</div>
       ))}
     </div>
   )

packages/query-devtools/src/Devtools.tsx

@@ -182,7 +182,9 @@ const PiPProvider = (props: PiPProviderProps) => {
 
     // It is important to copy all parent window styles. Otherwise, there would be no CSS available at all
     // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/#copy-style-sheets-to-the-picture-in-picture-window
-    ;[...document.styleSheets].forEach((styleSheet) => {
+    ;[
+      ...(useQueryDevtoolsContext().shadowDOMTarget || document).styleSheets,
+    ].forEach((styleSheet) => {
       try {
         const cssRules = [...styleSheet.cssRules]
           .map((rule) => rule.cssText)