How can I change the name property of sl-input using JavaScript?

Question

I have an ordinary sl-input in a form on a page

<sl-input name="email" type="email" placeholder="Email address"></sl-input>

I want to change the name property of the sl-input using JavaScript.

document.querySelector('sl-input').name = "new-email"

The above code seems to change the name property of the input field in the shadow DOM, but the sl-input's name property remains unchanged. If I then submit the form, the payload data refers to email, not new-email.

How can I change the name property of an sl-input using JavaScript?

Answer 1

The name attribute can be updated using setAttribute.

document.querySelector("sl-input").setAttribute("name", "new-email")