Create list of components that need an update to address errors when being dynamically generated by JavaScript

[Patrick-Daly-AA]

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

[Patrick-Daly-AA]

As an output for this issue, Issues should be created in each component which needs updates.

[Patrick-Daly-AA]

Will be continuing determining next steps in the discussion linked in the body of the issue.