Form autocompletion is broken when form elements are encapsulated within a Shadow DOM

[vlukashov]

HTML forms have a number of features based on association between controls and forms. To name a few: form autofill, implicit submit and form submission in general.

As browsers start to ship native Shadow DOM implementations it becomes apparent that Shadow DOM is not designed to work well with these HTML form features. E.g. it has been already noted in this repo, that the way how forms submission works with custom elements should be improved (see the issue #187).

This issue is to improve the web components specs in the part of forms autofill and implicit submit. Please either specify how that should work across Shadow DOM boundaries, or make an explicit statement that these features of HTML forms are not expected to work with Shadow DOM.

Here is a live demo for this issue: https://github.com/vlukashov/polymer-forms. It shows that in the browsers that support the native Shadow DOM (Chrome, Safari) neither forms autofill nor implicit submit work as expected.

However, without a spec it is difficult to call this behavior a browser bug.

[domenic]

The spec is pretty clear on this. Form autofill:

A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element's root is a shadow root versus a Document.

Implicit submit:

A form element's default button is the first submit button in tree order whose form owner is that form element.

Form submission:

Let controls be a list of all the submittable elements whose form owner is form, in tree order.

(Elements in the shadow tree are not in tree order.)

So, closing this, as the spec is already as clear as can be. But happy to continue discussing in the closed thread.

You may also enjoy #187.

[vlukashov]

Thanks for a detailed reply in under ten minutes!

Did I understand it right, that since elements in a shadow DOM are not in the tree order, they have no way of participating in most of HTML forms features (including autofill and implicit submit)?

Then what would be a way to create custom elements that should be able to work with forms? Maybe you can give some pointers for where to look.

[domenic]

they have no way of participating in most of HTML forms features (including autofill and implicit submit)?

Autofill works. It's implicit submit and form submission that don't.

Then what would be a way to create custom elements that should be able to work with forms? Maybe you can give some pointers for where to look.

Well, you can create a custom element without using shadow DOM to encapsulate the form parts. But assuming you want to use shadow DOM, what we need here is basically #187 for form submission.

I haven't heard of anyone requesting implicit submit support. For that I suppose you could use keydown event listeners and such to emulate the behavior.