Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

https://stackblitz.com/edit/vitejs-vite-afcpwuqt?file=custom-element.ts

Steps to reproduce

1. Open runnable example
2. Repeat the following steps for both the "Shadow DOM" and "Light DOM" examples (there are 2 visible on the page)
   1. Attach a file
   2. Click "Edit" (pencil) button to edit the meta fields of your file (one is required)
   3. Enter some text into the custom meta field "My Meta Field"
   4. Click "Save Changes"

Expected behavior

After clicking "Save Changes" in either the "Shadow DOM" example or the "Light DOM" example, the text entered into the "My Meta Field" textbox should be accepted and the overlay should close.

Actual behavior

After clicking "Save Changes" in the "Light DOM" example, things work as expected.

After clicking "Save Changes" in the "Shadow DOM" example, nothing happens. The save isn't accepted.

This is because the mechanism for handling saves and edits is via a <form>, and the form element is initialized in the document.body instead of the nearest parent Document/ShadowRoot for where the Uppy Dashboard is rendered (this can be acquired via Node.getRootNode()). Form submits cannot cross Document/ShadowRoot boundaries, which is why the <button type="submit"> doesn't do anything.

The runnable example uses Lit as an example using the ShadowDOM, as it's a popular library for creating custom elements.