Shadow DOM Selector Helper PRO

About

Shadow DOM Selector Helper is a developer tool that makes it easy to target
elements rendered inside Web Components (Shadow DOM) when building guided
tours, e2e tests, or any feature that depends on stable CSS selectors.

WHY THIS EXISTS
Modern UIs increasingly use Web Components and Lit / Storybook setups where
most of the content lives inside Shadow DOM. Standard CSS selectors and the
built-in element picker stop at the first shadow boundary, leaving developers
guessing the right path. This extension walks the real DOM tree, including
shadow roots, and gives you the exact selector you need.

WHAT IT DOES
- Hover any element on the page — including deeply nested Shadow DOM — and
  see three selector candidates side by side (short, medium, long).
- Each selector is checked live against the page: ✓ Unique, ⚠ N matches, or
  "not found" — no more trial and error.
- Click an element to lock the panel, then copy any of the three selectors
  in one tap.
- Generate ready-to-paste YAML steps for Driver.js and the Drupal Guided
  Tour module, including attachTo position (top / right / bottom / left)
  and default next / back buttons.
- Inject custom data-tour="..." attributes into any element directly from
  the panel, so your selectors stay stable even after a refactor.
- History of the last selectors with one-click restore.
- Keyboard shortcuts: Alt+S to toggle, Esc to unlock the current pick.

WHO IT IS FOR
- Drupal developers using the Guided Tour module with Driver.js.
- Teams building UIs with Lit, Storybook, or any Web Components stack.
- Anyone writing Cypress / Playwright tests against shadow-rendered apps.

HOW SELECTORS WORK
The extension uses the "host >> inner" piercing syntax — identical to the
one supported by the Drupal Guided Tour module. Selectors are built from
the real DOM tree (parentNode + shadowRoot), not from event propagation,
so slotted content is handled correctly and you never get false shadow
boundaries between segments.

PRIVACY
No data is collected, stored, or transmitted. Everything runs locally in
your browser. The extension only activates on the current tab when you
click its toolbar icon.

OPEN SOURCE
Source code: https://github.com/AlejandroPR23/shadow-selector-extension