[switch] Rendering switch causes an error when used in Vue/React

[alangdm]

Expected behavior

lion-switch renders properly and without errors when used in Vue/React

Actual Behavior

When trying to use switch inside a Vue/React context the following error is thrown:

Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes

This happens even when only trying to display a simple switch with a label like this:

<lion-switch label="Switch"></lion-switch>

Minimum reproductions:

• react error: https://webcomponents.dev/edit/8QgH0llm3VMAjwe2zQ0V
• vue error: https://webcomponents.dev/edit/zNBbzyMnZBCgw5jsPCV2

What's even weirder is that using switch in a lit component doesn't seem to have issues

• https://webcomponents.dev/edit/itiScyrKI3ImcCGWHCJy/src/index.js

Additional context

I've been able to reproduce this error in the following conditions:

• Browsers: Chrome, Safari (It works in Firefox)
• React: v16 and 17
• Vue: v3
• Lion/switch: v0.16.0, 0.17.5, and 0.18.2

I suspected the ScopedElementsMixin or ChoiceInputMixin could be responsible, so I tried rendering lion-input and lion-checkbox which use those mixins but the components don't seem to have any issues.

I also tried changing the get slots() function in lion-switch locally so that it didn't create a lion-switch-button or that it didn't set an attribute to it but that didn't work either.

[riovir]

Seemingly not Vue or React issue. On Chrome, the error is triggered by code as simple as:

import { LionSwitch } from '@lion/switch';
customElements.define('lion-switch', LionSwitch);
const el = document.createElement('lion-switch');
document.body.appendChild(el);

Likely caused by Chrome following the spec more strictly: https://stackoverflow.com/questions/43836886/failed-to-construct-customelement-error-when-javascript-file-is-placed-in-head

[riovir]

Upon further investigation, this issue is related to #1740 but both setting the role and the checked in the constructor cause the component to break. Unfortunately, simply disabling the setter on the checked as a workaround doesn't work as well as it does for the role, which remains static.

[Theo-Steiner]

Resolved by #1741.