Question

我很好奇WebComponents的任何内容是否可以在不违反the rules的情况下放弃嵌套HTML表单等内容。我问，因为我很好奇WebComponent的内部与包含它们的祖先元素有多孤立。我可以想象，如果使用WebComponents无法嵌套表单，那么可能会导致建议转向组件远离包含表单，因为如果消费者不了解组件的内部结构可能会导致问题。

无论哪种方式，我都进行了一些挖掘工作，并且无法解决任何问题，所以我想我会在这里咨询专家以获得更多见解。

相关帖子：

Answer 1

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

出于好奇，我快速fiddle（下面提供）测试嵌套表单的用例，其中一个在shadow root中。

＆＃13;

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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template id="template">
    <form id="shadowForm">
        <input type="text" name="text"/>
        <button type="submit">Submit shadow form</button>
    </form>
</template>


<form id="docForm" >
    <table>
    <tr>
        <td>
            <input type="checkbox" name="checkbox"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" val="" name="text"/>
        </td>
        </tr>
    <tr>
        <td>
            <select name="multiple" multiple="multiple">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <div id="host"></div>
            <button type="submit"> Submit document Form</button>
        </td>
    </tr>
    </table>
</form>


<div id="result"></div>

＆＃13;

IMO按预期工作，当您提交 light DOM 中的表单时，其中包含其中一个元素的shadowRoot中的表单，两者都呈现完美无缺。

WebComponent的内部与祖先的隔离程度包含它们的元素

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

我可以想象如果使用表单嵌套是不可能的 WebComponents ...如果消费者不了解组件的内部结构。

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

Answer 2

您可以使用对象标记来引用另一个表单，然后允许您嵌套表单。您可以引用其中一个表单或外部页面/表单。我已将它用于HTML5页面，但尚未尝试在ASP.NET表单上使用它。如果每个表单的名称不同，我就不会发现为什么它不适用它们的任何原因。

此页面上有一个示例： http://smallbusiness.chron.com/embed-external-object-website-57221.html

他们正在嵌入Flash，但它也适用于其他页面。主要部分是您设置要嵌入“数据”中的网址。属性。

Web组件是否允许嵌套HTML表单？

2 个答案: