<sl-button type="submit" form="formId"> throws exception when it's unmounted

[raquo]

Describe the bug

When a Button with form attribute is unmounted / detached, an unhandled exception is thrown (see details below).

Use case: I have a Button component that is outside of the form, so it has a form attribute. When I click the button, my code does some work, and then renders a different page, so the submit button is eventually unmounted (detached) from the DOM. The form itself may or may not remain mounted.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://jsfiddle.net/j3t1rnL6/5/
2. Open browser dev console
3. Click on 'Submit' button
4. See the error in the browser console.

Screenshots

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 120

Additional information

1. Note that the demo has a setTimeout delay to be more realistic (async submit), but it throws without setTimeout just as well.

2. Note that the element in the doc variable mentioned below may or may not contain the form. It depends on which element(s) in the tree are getting unmounted, so merely replacing getElementById with querySelector will not solve the issue.

When button is unmounted, internally this snippet from button.component.ts is run:

     if (input.hasAttribute('form')) {
        const doc = input.getRootNode() as Document | ShadowRoot;
        const formId = input.getAttribute('form')!;
        return doc.getElementById(formId) as HTMLFormElement;
      }

It seems that because input is already unmounted (detached from the DOM) when this is run, and input itself not inside shadow DOM, input.getRootNode() returns its parent element / detached root (<div id="actionButtons">), not the document, as per MDN. However, the code assumes that doc is a document, and fails when the regular element does not have a getElementById method.

I don't know enough about Shoelace to say if this is an individual edge case, or a general problem that could happen with other form components too.

[claviska]

Fixed in #1881