fix(overlay): pick components inside ShadowDom components

[erkamyaman]

What and why

The Components tab and the component tree do show components inside open shadow roots (ViewEncapsulation.ShadowDom), but the on-page picker couldn't select them. Its listeners are on document in the capture phase, and there the browser retargets an event from inside a shadow root to the shadow host. hostOf(event.target) then walked up from the host, so hover outlines and clicks always landed on the outer ShadowDom component.

hostOf now starts from event.composedPath()[0], the element really under the pointer. The check that ignores clicks on the devtools popup still uses event.target, which is what that check needs because the popup is itself a shadow host.

How it was verified

New test in component-pick.test.ts with a ShadowDom shell component containing a child component. On main clicking the child selects app-shell. With the fix it selects app-trip-card. All package tests pass.

• pnpm commit:check (commit messages follow the guidelines)
• pnpm format:check
• pnpm typecheck (includes the ngc template checks)
• pnpm test:devtools (all passing)
• pnpm skills:check (when .claude/ changed): not changed
• No docs change needed: the fix makes the code match existing docs (no-docs)
• pnpm extension:build and extension/ui committed (when app/ changed): not changed
• Checked in the browser with axe (when the UI changed): no UI change

Summary by CodeRabbit

• Bug Fixes
  • Component picking now correctly highlights and selects components inside open shadow roots, including when hover and click events originate from nested elements.

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		2cac967	2026-10-11T03:18:55.567Z	View logs ↗

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: bd99b3f9-223e-4141-9eda-f77238c5abca

---

📥 Commits

Reviewing files that changed from the base of the PR and between 58273c6 and 2cac967.

---

📒 Files selected for processing (2)

• packages/devtools/src/__tests__/component-pick.test.ts
• packages/devtools/src/component-pick.ts

---

Limit details: You’ve used all 10 included reviews currently available.

---

---

📝 Walkthrough

Walkthrough

Component picking now uses the composed path of hover and click events to identify Angular component hosts inside shadow roots. A new test checks that a nested component is highlighted and returned as the picked component.

Changes

Shadow-root component picking

Layer / File(s)	Summary
Composed event target resolution packages/devtools/src/component-pick.ts, packages/devtools/src/__tests__/component-pick.test.ts	hostOf resolves the component host from the event’s composed path, with a fallback to the event target. Hover and click handlers pass the full event. The test checks highlighting and picking a component inside a shadow root.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

---

Merge Risk: ⚪ Minimal · up to 2cac9

This change lets the component picker select components inside open shadow roots instead of their outer host. No merge-blocking risk is evident, and the author reports the relevant checks passed.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: fixing component picking inside ShadowDom components.
Docstring Coverage		Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Usage-based review receipt

• Mode: Continue automatically
• Reviewed files: 2
• Waived: $0.50 (charged $0.00)
• View usage details

Note

This review exceeded your plan’s limits and used usage-based reviews—free during trial, billed after paid activation unless disabled. Manage usage-based reviews.

---

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