Media
1 item
Description
Pick elements inside Shadow DOM and generate CSS selectors + YAML steps for Driver.js / Drupal Guided Tour. 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