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 by sukvvon · Pull Request #10815 · TanStack/query

sukvvon · 2026-05-28T05:08:28Z

🎯 Changes

setupStyleSheet accepts an optional target: ShadowRoot so the goober #_goober style can live inside an Embedded devtools' ShadowRoot instead of the host document.head. The dedup check used document.querySelector('#_goober') || target?.querySelector('#_goober'), so once document.head had a #_goober (e.g. a floating devtools mounted earlier in the same page), a subsequent Embedded devtools mount with a ShadowRoot target hit the short-circuit and skipped its own install — leaving the ShadowRoot without goober's stylesheet and the Embedded devtools UI unstyled.

Scope the dedup check to the actual install root: when a target is provided, only look inside that target; otherwise fall back to document.head. The install path collapses to a single root.appendChild since the only choice is now between target and document.head.

The existing setupStyleSheet tests still cover the document-only and target-only dedup paths. A new should install the style tag into the "ShadowRoot" target even when "document.head" already has one case calls setupStyleSheet twice — once for document.head, once for the ShadowRoot — and asserts the ShadowRoot ends up with its own #_goober carrying the second nonce, so the regression would fail loudly if the cross-target dedup is reintroduced.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with `pnpm run test:pr`.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Bug Fixes
- Fixed devtools styling in shadow DOM environments—style sheets are now properly scoped to their target, ensuring shadow DOM instances receive correct styling even when styles exist in the main document.

… the target so a 'shadowDOMTarget' still receives its own '#_goober' style tag when 'document.head' already has one

coderabbitai · 2026-05-28T05:08:40Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f238ae99-a9b1-4b40-9fc2-13eee2538a07

📥 Commits

Reviewing files that changed from the base of the PR and between 3daac67 and 0e6a46e.

📒 Files selected for processing (3)

.changeset/devtools-setup-stylesheet-cross-target-dedup.md
packages/query-devtools/src/__tests__/utils.test.ts
packages/query-devtools/src/utils.tsx

📝 Walkthrough

Walkthrough

setupStyleSheet now deduplicates _goober style tags within a specific target instead of globally. When a shadowDOMTarget is provided, it receives its own style tag even when document.head already has one. Test and changeset validate and document the fix.

Changes

setupStyleSheet Target-Scoped Deduplication

Layer / File(s)	Summary
setupStyleSheet target-scoped deduplication fix `packages/query-devtools/src/utils.tsx`, `packages/query-devtools/src/__tests__/utils.test.ts`, `.changeset/devtools-setup-stylesheet-cross-target-dedup.md`	Implementation consolidates dual-path deduplication logic into single-root logic using `target ?? document.head`. Test verifies shadowDOMTarget receives its own `_goober` style tag when document.head already has one, with nonce attribute set correctly. Changeset documents the patch.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

TanStack/query#10782: Adds an Explorer test that renders with a real shadowDOMTarget, directly covering the updated stylesheet setup behavior fixed in this PR.

Suggested labels

package: query-devtools

Poem

🐰 A shadow needs its own fine threads,
Not borrowed from the doc's own bed,
When dedup scopes to target's nest,
Each root gets styled for the best!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: scoping the dedup check to prevent cross-target interference when installing style sheets.
Description check	✅ Passed	The description covers the problem, solution, testing approach, and all required checklist items are completed with clear technical detail.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/query-devtools-setup-stylesheet-cross-target-dedup

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-28T05:08:57Z

View your CI Pipeline Execution ↗ for commit 0e6a46e

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 40s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	28s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-28 05:13:04 UTC

github-actions · 2026-05-28T05:09:12Z

🚀 Changeset Version Preview

2 package(s) bumped directly, 23 bumped as dependents.

🟩 Patch bumps

Package	Version	Reason
`@tanstack/lit-query`	0.2.6 → 0.2.7	Changeset
`@tanstack/query-devtools`	5.100.14 → 5.100.15	Changeset
`@tanstack/angular-query-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/angular-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/eslint-plugin-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/preact-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-async-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-broadcast-client-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-persist-client-core`	5.100.14 → 5.100.15	Dependent
`@tanstack/query-sync-storage-persister`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-next-experimental`	5.100.14 → 5.100.15	Dependent
`@tanstack/react-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-devtools`	5.100.14 → 5.100.15	Dependent
`@tanstack/solid-query-persist-client`	5.100.14 → 5.100.15	Dependent
`@tanstack/svelte-query`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-devtools`	6.1.33 → 6.1.34	Dependent
`@tanstack/svelte-query-persist-client`	6.1.33 → 6.1.34	Dependent
`@tanstack/vue-query`	5.100.14 → 5.100.15	Dependent
`@tanstack/vue-query-devtools`	6.1.33 → 6.1.34	Dependent

pkg-pr-new · 2026-05-28T05:11:44Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10815

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10815

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10815

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10815

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10815

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10815

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10815

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10815

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10815

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10815

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10815

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10815

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10815

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10815

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10815

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10815

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10815

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10815

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10815

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10815

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10815

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10815

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10815

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10815

commit: 0e6a46e

github-actions · 2026-05-28T05:12:26Z

size-limit report 📦

Path	Size
react full	12.11 KB (0%)
react minimal	9.08 KB (0%)

fix(query-devtools/utils): scope the 'setupStyleSheet' dedup check to…

0e6a46e

… the target so a 'shadowDOMTarget' still receives its own '#_goober' style tag when 'document.head' already has one

sukvvon self-assigned this May 28, 2026

sukvvon requested a review from TkDodo May 28, 2026 05:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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
sukvvon wants to merge 1 commit into
mainfrom
fix/query-devtools-setup-stylesheet-cross-target-dedup

sukvvon commented May 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 28, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

pkg-pr-new Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloud Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 28, 2026

🚀 Changeset Version Preview

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented May 28, 2026

Uh oh!

github-actions Bot commented May 28, 2026

size-limit report 📦

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 28, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 28, 2026 •

edited

Loading

nx-cloud Bot commented May 28, 2026 •

edited

Loading