HTML中表单能嵌套吗,html5 – Web组件是否允许嵌套HTML表单？

这对我来说似乎是一个非常有效的问题.

出于好奇,我快速做了一个fiddle(下面提供)测试嵌套表单的用例,其中一个在shadow root中.

var template = document.querySelector('template');

var clone = document.importNode(template.content,true);

var root = document.querySelector('#host').createShadowRoot();

root.appendChild(clone);

document.querySelector('button').onclick = function(e) {

var formValues = $('#docForm').serialize();

alert(formValues);

$('#result').text(formValues);

return false;

}

document.querySelector('#host').shadowRoot.querySelector('button').onclick = function(e) {

var form = document.querySelector('#host').shadowRoot.querySelector('#shadowForm');

alert($(form).serialize());

$('#result').text($(form).serialize());

return false;

}

Submit shadow form

A B C

Submit document Form

IMO它按预期工作,当你提交一个在轻DOM中的表单,其中包含一个元素的shadowRoot中的表单,它们都呈现完美.

just how isolated the internals of a WebComponent are to the ancestor

elements that contain them

Shadow Root是与特定元素相关联的不同节点,它不能使用常规DOM操作API访问,因此不会干扰轻型DOM标记,在这种情况下是form-in-form规则.

I could imagine that if nesting of forms is not possible using

WebComponents … if a consumer isn’t aware of the internals of the component.

因此,要回答这个问题,用户可以在页面上放置他们想要的任何html,如果该组件使用shadow DOM进行封装,则其渲染行为不会受到他们使用的组件的影响.