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

Question

我很好奇WebComponents的工作是否有可能在不违反规则的情况下逃脱嵌套HTML表单之类的事情.我问,因为我很好奇WebComponent的内部与包含它们的祖先元素有多孤立.我可以想象,如果使用WebComponents无法嵌套表单,那么由于消费者不了解组件内部的问题,可能会导致建议转向组件远离包含表单.

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

相关文章:

• 在另一个html表单中有一个html表单是否有效？
• 你能嵌套html表格吗？

Answer 1

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

出于好奇,我做了一个快速小提琴(下面提供)测试嵌套形式的用例,其中一个在阴影根中.

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它按预期工作,当你提交一个在轻DOM中的表单,其中包含一个元素的shadowRoot中的表单,它们都呈现完美.

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

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

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

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