Skip to content

feat: Shadow DOM Piercing — Recursive traversal of shadowRoot boundaries #13

Description

@Delqhi

Problem

Modern web apps (Prolific, Salesforce, React) use Shadow DOM and Web Components. Our accessibility tree snapshot only scans the light DOM, missing elements hidden behind shadowRoot boundaries. This causes "hit-and-miss" failures.

Evidence

  • Shadow DOM hides component internals from document.querySelectorAll()
  • closed shadow roots require CDP or MAIN world injection
  • Content scripts in ISOLATED world cannot pierce shadow boundaries natively
  • Chrome MV3 requires chrome.scripting.executeScript with world: 'MAIN' for full access

Solution (Implemented)

  1. injector.js: Added recursive shadowRoot traversal in the tree walker:
    if (child.shadowRoot) {
        let shadowNodes = Array.from(child.shadowRoot.querySelectorAll('*'));
        shadowNodes.forEach(child => walk(child, depth + 1));
    }
  2. injector.js: Added window._sinDeepQuery(selector) utility that pierces all shadow boundaries recursively

Files Changed

  • extension/content/injector.js — tree walker + _sinDeepQuery utility

Acceptance Criteria

  • Accessibility tree includes elements inside shadow roots
  • _sinDeepQuery finds elements across shadow boundaries
  • Prolific React components are fully visible in snapshots

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions