Allow a form in shadow DOM to be the form owner of light DOM fields

[jakearchibald]

What problem are you trying to solve?

I want to create a custom element, <ui-form>, which has or wraps form functionality.

What solutions exist today?

<form is="my-custom-thing">, but WebKit opposes this.

How would you solve it?

Assuming that WebKit will not change their position:

My <ui-form> could create a shadow root which contains <form><slot></slot></form>.

However, at present (although it isn't clear from the algorithm), shadow boundaries are not crossed when associating fields with forms.

Instead, the algorithm could be updated to cross-shadow boundaries. For compatibility, the form must opt-in to being considered when crossing shadow boundaries: <form allowcrossshadowboundarypleasethankyou>. There may be better names.

Anything else?

No response

[jakearchibald]

An alternative would be something like:

class MyCustomElement {
  static form = true;
}

Similar to formAssociated. Then elementInternals could be used to configure form behaviour.

[developit]

+1 to this - it seems like most of the UI toolkits built on Custom Elements have had to work around this, often by "patching" fields within shadow boundaries into FormData via the formdata event - tricky to do correctly for arbitrary input types (esp files).

[smaug----]

So how would the .form getter work for the slotted elements?

[keithamus]

I wonder if Custom Attributes (WICG/webcomponents#1029) would solve for your usecase?

[jakearchibald]

@keithamus I don't think so. This would be a custom element with potential UI in a shadow root.

[jakearchibald]

@smaug----

So how would the .form getter work for the slotted elements?

Good point. I guess that answer is much easier in the alternative idea #10220 (comment), since it would just be the custom element.

[KonnorRogers]

I know this is whatwg/html, but this issue around elements which have ElementInternals being able to register as a "submit button" seems very similar.

WICG/webcomponents#814