Create tests in all components to catch Error being thrown into the DOM when trying to create components via JavaScript

[Patrick-Daly-AA]

Will need to follow work from #532

The goal is to create a test to handle this error case, and add it to every component and the generator.

Discussed in https://github.com/orgs/AlaskaAirlines/discussions/529

^{Originally posted by jordanjones243 March 21, 2024}
An issue was brought to my attention recently with creating an instance of auro-popover through JavaScript that likely can come up in other components:

• Cannot create instance of auro-popover without DOMException auro-popover#69

Basically, in most of our components, we have attributes that are applied to our custom elements. These attributes are usually initialized inside of our constructor and some are reflected onto the element in the DOM. Where the issue arises is when we try to create a component using the DOM (via JavaScript). An error is thrown because the DOM is complaining that it cannot create an element that already has attributes applied to it. In this case, we had our auro-popover component being created with an id attribute already being assigned a value in the constructor.

What we need to do is go through all of our components and move all of our attributes that are being reflected onto the components from being initialized in the constructor to the connectedCallback() function, which runs once an element is attached to the DOM.

This simple change from auro-popover can be used as a guide to make the change in any other component that can run into this issue:

• https://github.com/AlaskaAirlines/auro-popover/pull/68/files