auro-button: NotSupportedError: A newly constructed custom element must not have attributes

[whexberg]

Describe the bug

Our react (v17.0.2) application is having trouble rendering in Safari, whenever we use an auro-button. In chrome, and edge, everything seems to be fine.

To Reproduce

Steps to reproduce the behavior:

1. import "@alaskaairux/auro-button";
2. Attempt to render an inside of any component
3. Start and then visit the application in your browser
4. See error

Expected behavior

Application should render

Screenshots

Desktop (please complete the following information):

• OS: MacOS Big Sur 11.4 (20F71)
• Browser: Safari
• Version: 14.1.1 (16611.2.7.1.4)
• React Version: v17.0.2

Smartphone (please complete the following information):

• Have not tried, yet

Additional context

So far, this seems to be happening on 3 different machines using Safari. Also, when running playwright tests with jest, in headless mode, we get similar rendering errors.

After days of tinkering, we've made some progress, but we're not sure of the consequences. If I go to node_modules/@alaskaairux/auro-button/dist/auro-button.js, on line 39 there is a polyfill applied to the shadow root. Commenting out this line seems to fix the issue, however, I'm not familiar with this particular function and do not know the consequences of removing it.

[blackfalcon]

Thanks for this issue. I feel that this issue is related to a past issue that was resolved. AlaskaAirlines/auro-button#112

What version of the auro-button are you using? This issue was just recently updated.

[blackfalcon]

This link https://auro.alaskaair.com/components/auro/button is the latest version of the component and this is a React app. Do you see the issue here as well?

[whexberg]

Thanks for this issue. I feel that this issue is related to a past issue that was resolved. AlaskaAirlines/auro-button#112

What version of the auro-button are you using? This issue was just recently updated.

You're absolutely right! I updated to the latest version, and all seems well, now. Thank you!