feat: Add shadow DOM support to ANDI

[jasonday]

Caution

This pull request is for informative purposes/communication only.

Proof of concept for adding Shadow DOM support to ANDI. I have not ironed out all of the kinks, but do have ANDI providing information about elements (such as form fields) within shadow roots. I haven't tested across all ANDI functionality, nor all types of shadow DOM components.

Testing

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});})());

URL

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

shadow DOM component

<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>

ANDI-update screenshot