Explicit support for nested forms inside ShadowRoots
bahrus opened this issue · comments
Reading through the html standard there are a few mentions of disallowing nested forms. What I've seen browsers do in this scenario is to strip the form tags as it parses.
I think it would be nice to update the html standard to explicitly state that this does not apply to nested ShadowDOM roots -- All three browser engines seem to work fine with this scenario, as long as the ShadowDOM content is appended from a cloned template. I think that would be a good thing as I definitely see common scenarios where we would want to allow forms in a custom element, without telling consumers they cannot use the custom element inside a form.
However, Safari (16.4 TP, at least) exhibits different behavior from Chrome and Firefox when the innerHTML property is used to set the content. In this scenario, the form tag is stripped, which kind of seems like a bug, except I'm not sure the standard is explicit enough on this whole topic to say whether it is a bug or a feature.
Correction:
Actually, the demo illustrates the unexpected behavior, but is consistent across all three browsers.
The reason I saw a difference between the browsers, is I needed to turn off streaming in Safari in this library, because Safari doesn't currently upgrade web components when streaming HTML into the Shadow DOM. So I set the content using innerHTML in lieu of streaming, just for Safari.
So if we clone a template with a form into a shadow root, nested forms are okay. If we stream HTML into a shadow root, they are also okay. It's only when we use innerHTML where the nested forms get stripped. Is there a reason for this odd inconsistency?