Forms do not work when used within Iframes or the Shadow Dom

[leeBigCommerce]

Describe the bug and the expected behavior

This is obviously quite a niche scenario, but I've noticed that Conform does not work correctly when a form is used either within an iframe or within the shadow dom.

Expected behaviours:

• when used within either an iframe or the shadow dom
• form.update programmatically sets target field values
• using a submit button submits the form

Current behaviours:

• when used within either an iframe or the shadow dom
  • form.update throws an uncaught error of Uncaught Error: Failed to submit the form. The element provided is null or undefined.
  • using a submit button throws an uncaught error of The submit event is dispatched by form#«r1» instead of form#«r1»

Conform version

v1.4

Steps to Reproduce the Bug or Issue

1. Use Conform to handle a form within either an iframe or within the shadow dom
2. Attempt to use either form.update or a basic submit

Recreated in sandbox: https://codesandbox.io/p/sandbox/react-typescript-forked-hn7hxl
(Open the sandbox terminal to see further error details)

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

Looking through the Conform repo, I believe this issue is likely down to the use of the global document

e.g.

function getFormElement(): HTMLFormElement | null {
	return document.forms.namedItem(latestOptions.formId);
}

the parent window's document does not have access to a form element, should it exist within either a child iframe or the shadow dom.

Possible (?) option:

Rather than use document.forms, perhaps a react Ref could be used to keep a reference of the form element. If needed, the owning document could then be reached via .ownerDocument on that form element.

[edmundhung]

Thanks for the codesandbox! This is a good callout indeed.

Rather than use document.forms, perhaps a react Ref could be used to keep a reference of the form element.

I think this might be the way to go. But it's kinda tricky with the current API as we literally assumes the form id to be a key to the underlying form element which is not true on both the cases here.

Having said that, we are currently working out the next major version and I think this would be something v2 can support.