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

Question

我很好奇 WebComponents makes it possible to get away with things like nested HTML forms without violating the rules 是否有任何进展。我问是因为我很好奇 WebComponent 的内部结构与包含它们的祖先元素之间的隔离程度。我可以想象，如果使用 WebComponents 无法嵌套表单，那么这可能会导致建议引导组件远离包含表单，因为如果消费者不了解组件的内部结构，这可能会导致问题。

无论哪种方式，我都进行了一些挖掘，但无法找到任何东西，所以我想我应该咨询这里的专家以获得更多见解。

相关帖子：

Is it valid to have a html form inside another html form?
Can you nest html forms?

Answer 1

您可以使用对象标记来引用另一个表单，这样您就可以嵌套表单。您可以引用您的表单之一或外部 page/form。我已经将它用于 HTML5 页，但还没有在 ASP.NET 表单上尝试过。如果每个表单名称不同，我看不出有任何理由不能与它们一起使用。

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

他们嵌入了 Flash，但它也适用于其他页面。主要部分是您设置要嵌入的 URL 'data' 属性。

Answer 2

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

出于好奇，我做了一个快速的 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;
}

<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 中的表单，它们都呈现非常好。

just how isolated the internals of a WebComponent are to the ancestor elements that contain them

Shadow Root 是与特定元素相关联的不同节点，它不能通过常规 DOM 操作 API 访问，因此不会干扰 light DOM 标记，在这种情况下是内部形式-表单规则。

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 如果该组件使用阴影，其呈现行为将不会受到他们使用的组件的影响 DOM 用于封装。

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

Do web components allow for nesting of HTML forms?

html

forms

web-component