Calcite-components: Bug: Button - Remove use of document.getElementsByName()

[driskull]

Summary

Remove use of document.getElementById since it won't work if the component is within another shadow dom component. It seems like other teams are wrapping our components in their shadow dom components so we need to be mindful of this.

The solution is to use this.el.getRootNode() and then query either the rootNode (document) or rootNode.host (shadow dom) element.

Actual Behavior

const targetForm = requestedForm
        ? (document.getElementsByName(`${requestedForm}`)[0] as HTMLFormElement)
        : (this.el.closest("form") as HTMLFormElement);

Expected Behavior

import { getElementById, getRootNode } from "../../utils/dom";

const targetForm =  rootNode instanceof ShadowRoot
          ? rootNode.host.querySelector(`[name=${requestedForm}]`)
          : document.getElementsByName(`${requestedForm}`)[0] as HTMLFormElement

Reproduction Steps

1. Use a calcite-button with a form inside the shadow dom of another component
2. Notice that the form functionality is not working as expected.

Relevant Info

https://github.com/Esri/calcite-components/pull/1956

[driskull]

Can we get this issue elevated so that we use the queryElementsRoots in dom utils?

What do you think @jcfranco Should this be a priority since it uses document and would fail inside a shadowRoot.

[jcfranco]

Added to the next sprint. Will move to this one if the queue clears up.

[driskull]

Think this should be pre 1.0