feat: render devtools in a shadow node

jakiestfu · jakiestfu · commit cc4f0c6de2de · 2025-09-25T22:10:07.000Z
diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html
@@ -31,6 +31,18 @@
     <description
       >A basic example of using TanStack Devtools with React.</description
     >
+
+    <!--
+      These styles exist only to verify that the Devtools UI
+      does NOT inherit global styles. Because the devtools are
+      rendered inside a Shadow Root, the rules below should have
+      no visible effect.
+    -->
+    <style type="text/css">
+      [data-testid="tanstack_devtools"] * {
+        color: red !important;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/devtools/src/devtools.tsx b/packages/devtools/src/devtools.tsx
@@ -188,9 +188,30 @@ export default function DevTools() {
   })
   const { theme } = useTheme()
 
+  const [gooberCss, setGooberCss] = createSignal("");
+  createEffect(() => {
+    // Setup mutation observer for goober styles with id `_goober
+    const gooberStyles = document.querySelector('#_goober')
+    if (gooberStyles) {
+      setGooberCss(gooberStyles.textContent)
+      const observer = new MutationObserver(() => {
+        setGooberCss(gooberStyles.textContent)
+     })
+      observer.observe(gooberStyles, {
+        childList: true, // observe direct children
+        subtree: true, // and lower descendants too
+        characterDataOldValue: true, // pass old data to callback
+      })
+      onCleanup(() => {
+        observer.disconnect()
+      })
+    }
+  })
+
   return (
     <ThemeContextProvider theme={theme()}>
-      <Portal mount={(pip().pipWindow ?? window).document.body}>
+      <Portal mount={(pip().pipWindow ?? window).document.body} useShadow>
+        <style>{gooberCss()}</style>
         <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
           <Show
             when={
diff --git a/packages/react-devtools/src/devtools.tsx b/packages/react-devtools/src/devtools.tsx
@@ -157,15 +157,10 @@ export const TanStackDevtools = ({
                   },
             render: (e, theme) => {
               const id = e.getAttribute('id')!
-              const target = e.ownerDocument.getElementById(id)
-
-              if (target) {
-                setPluginContainers((prev) => ({
-                  ...prev,
-                  [id]: e,
-                }))
-              }
-
+              setPluginContainers((prev) => ({
+                ...prev,
+                [id]: e,
+              }))
               convertRender(plugin.render, setPluginComponents, e, theme)
             },
           }
