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

【问题标题】：Do web components allow for nesting of HTML forms?Web 组件是否允许嵌套 HTML 表单？
【发布时间】：2016-02-11 22:58:49
【问题描述】：

我很好奇 WebComponents 的工作是否可以在不违反 the rules 的情况下摆脱嵌套 HTML 表单之类的事情。我之所以问，是因为我很好奇 WebComponent 的内部与包含它们的祖先元素是多么隔离。我可以想象，如果使用 WebComponents 无法嵌套表单，那么这可能会导致建议引导组件远离包含表单，因为如果消费者不了解组件的内部结构可能会导致问题。

无论哪种方式，我都进行了一些挖掘，但没有发现任何东西，所以我想我应该咨询这里的专家以获得更多信息。

相关帖子：

【问题讨论】：

标签： html forms web-component

【解决方案1】：

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

出于好奇，我快速创建了一个fiddle（如下提供），它测试了嵌套表单的用例，其中一个在影子根内部。

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

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

IMO 它按预期工作，当您提交 light DOM 中的表单时，该表单在其中一个元素的 shadowRoot 中包含一个表单，它们都呈现得非常好。

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

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

我可以想象，如果表单嵌套无法使用 WebComponents ...如果消费者不知道组件的内部结构。

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

【讨论】：

为user can put whatever html they want on the page and its rendering behavior won't be affected by what component they are using if that component is using shadow DOM for encapsulation+1
很好的答案。但是请注意， createShadowRoot() 已被贬低；你会想用 attachShadow() 代替。

【解决方案2】：

您可以使用对象标签来引用另一个表单，然后您可以嵌套表单。您可以参考您的表格之一或外部页面/表格。我已经将它用于 HTML5 页面，但还没有在 ASP.NET 表单上尝试过。如果每个表单名称不同，我看不出它不能与它们一起使用的任何原因。

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

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

【讨论】：