fix(query-devtools/utils): scope the 'setupStyleSheet' dedup check to the target so a 'shadowDOMTarget' still receives its own '#_goober' style tag when 'document.head' already has one (#10815)

Author: sukvvon

.changeset/devtools-setup-stylesheet-cross-target-dedup.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': patch
+---
+
+fix(query-devtools/utils): scope the 'setupStyleSheet' dedup check to the target so a 'shadowDOMTarget' still receives its own '#_goober' style tag when 'document.head' already has one

packages/query-devtools/src/__tests__/utils.test.ts

@@ -1042,6 +1042,19 @@ describe('Utils tests', () => {
       expect(styleTags).toHaveLength(1)
       expect(styleTags[0]?.getAttribute('nonce')).toBe('first-nonce')
     })
+
+    it('should install the style tag into the "ShadowRoot" target even when "document.head" already has one', () => {
+      const host = document.createElement('div')
+      const shadow = host.attachShadow({ mode: 'open' })
+
+      setupStyleSheet('host-nonce')
+      setupStyleSheet('shadow-nonce', shadow)
+
+      expect(shadow.querySelector('#_goober')).not.toBeNull()
+      expect(shadow.querySelector('#_goober')?.getAttribute('nonce')).toBe(
+        'shadow-nonce',
+      )
+    })
   })
 
   describe('sortFns', () => {

packages/query-devtools/src/utils.tsx

@@ -308,18 +308,12 @@ export const deleteNestedDataByPath = (
 // Adds a nonce to the style tag if needed
 export const setupStyleSheet = (nonce?: string, target?: ShadowRoot) => {
   if (!nonce) return
-  const styleExists =
-    document.querySelector('#_goober') || target?.querySelector('#_goober')
-
-  if (styleExists) return
+  const root = target ?? document.head
+  if (root.querySelector('#_goober')) return
   const styleTag = document.createElement('style')
   const textNode = document.createTextNode('')
   styleTag.appendChild(textNode)
   styleTag.id = '_goober'
   styleTag.setAttribute('nonce', nonce)
-  if (target) {
-    target.appendChild(styleTag)
-  } else {
-    document.head.appendChild(styleTag)
-  }
+  root.appendChild(styleTag)
 }