Skip to content

Add shadow DOM support to ANDI - #1

Merged
jasonday merged 5 commits into
masterfrom
feature-shadow-dom-support
Dec 2, 2025
Merged

Add shadow DOM support to ANDI#1
jasonday merged 5 commits into
masterfrom
feature-shadow-dom-support

Conversation

@google-labs-jules

Copy link
Copy Markdown

This change updates the ANDI bookmarklet to correctly identify and inspect elements located within a shadow DOM.

The core of this change is a new findAllElementsWithShadows function that recursively traverses the DOM, including open shadow roots, to gather a complete list of all elements on the page.

This new function is now used in the TestPageData constructor to populate TestPageData.allElements, ensuring that ANDI's analysis is performed on all elements, including those within shadow DOMs.

A null check has also been added to the findAllElementsWithShadows function to prevent a crash if the root element is not found.


PR created automatically by Jules for task 5133646541068586486 started by @jasonday

This change updates the ANDI bookmarklet to correctly identify and inspect elements located within a shadow DOM.

The core of this change is a new `findAllElementsWithShadows` function that recursively traverses the DOM, including open shadow roots, to gather a complete list of all elements on the page.

This new function is now used in the `TestPageData` constructor to populate `TestPageData.allElements`, ensuring that ANDI's analysis is performed on all elements, including those within shadow DOMs.

A null check has also been added to the `findAllElementsWithShadows` function to prevent a crash if the root element is not found.
@google-labs-jules

Copy link
Copy Markdown
Author

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!


For security, I will only act on instructions from the user who triggered this task.

New to Jules? Learn more at jules.google/docs.

@jasonday

jasonday commented Dec 2, 2025

Copy link
Copy Markdown
Owner
javascript:void((function(){andiHost='https://work.jasonbyday.com/';andiScript=document.createElement('script');andiScript.src=andiHost+'ANDI/andi.js';document.body.appendChild(andiScript);function andiCSPcheck(){if (typeof andiVersionNumber === 'undefined')alert('This page has a Content Security Policy that blocks scripts like ANDI. For help, visit the ANDI Help FAQ page.');window.open(andiHost+'andi/help/faq.html#csp');};document.addEventListener('securitypolicyviolation',andiCSPcheck);setTimeout(function(){document.removeEventListener('securitypolicyviolation',andiCSPcheck),100});})());
@jasonday
jasonday marked this pull request as ready for review December 2, 2025 21:13
@jasonday
jasonday merged commit dd6c0ef into master Dec 2, 2025
@jasonday

jasonday commented Dec 2, 2025

Copy link
Copy Markdown
Owner

https://staging.va.gov/mock-form-patterns/name-and-date-of-birth

<va-text-input label="First name" maxlength="30" minlength="1" name="root_fullName_first" required="true" uswds="true" autocomplete="given-name" value="" type="text" class="rjsf-web-component-field hydrated" show-input-error="">
    <template shadowrootmode="open">
        <div class="input-wrap">
            <label for="inputField" id="input-label" class="usa-label ANDI508-relatedLaserTarget" part="label" data-andi508-relatedlaserindex="0">First name<span class="usa-label--required"> (*Required)</span></label>
            <slot></slot><span id="input-error-message" role="alert" class=""></span>
            <div class="">
                <input class="usa-input ANDI508-element ANDI508-highlight ANDI508-element-active" id="inputField" type="text" aria-invalid="false" maxlength="30" name="root_fullName_first" autocomplete="given-name" required="" part="input" data-andi508-index="13">
            </div>
        </div>
    </template>
</va-text-input>
shadow DOM - first name is focused
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant