Form elements removed from the DOM are still validated

[alenaksu]

Describe the bug

When a form control (e.g. sl-input) is removed from the DOM, either programmatically or through conditional rendering, it is still included in the form's validation process upon submission. This results in the form being unable to submit, due to validation errors on the removed element preventing the submission.

The following condition in FormControlController may be the reason why listeners are not being detached upon element disconnection:
https://github.com/shoelace-style/shoelace/blob/next/src/internal/form.ts#L188

This issue may also be related to issue #1841

To Reproduce

Steps to reproduce the behavior:

1. Create a form with two required fields
2. Listen for submit event
3. Fill out the first field
4. Try to submit, a validation error should be displayed on the second field
5. Remove the second field from the DOM
6. Try to submit again, you won't get any validation error nor the submit listener is invoked.

Demo

https://codepen.io/alenaksu/pen/KwPeWzx?editors=1010

Screenshots

N/A

Browser / OS

• OS: N/A
• Browser: N/A
• Browser version: N/A

Additional information

N/A