我很好奇 WebComponents 是否有任何进展可以在不违反 the rules 的情况下摆脱诸如嵌套 HTML 表单之类的事情.我问是因为我很好奇 WebComponent 的内部结构与包含它们的祖先元素之间的隔离程度。我可以想象,如果使用 WebComponents 无法嵌套表单,那么这可能会导致建议引导组件远离包含表单,因为如果消费者不了解码件的内部结构,这可能会导致问题。
无论哪种方式,我都进行了一些挖掘,但无法找到任何东西,所以我想我应该咨询这里的专家以获得更多见解。
相关帖子:
最佳答案
这对我来说似乎是一个非常有效的问题。
出于好奇,我快速做了一个 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 中的表单,它们都呈现得很好。
just how isolated the internals of a WebComponent are to the ancestor elements that contain them
Shadow Root 是与特定元素关联的不同节点,它不能通过常规 DOM 操作 API 访问,因此不会干扰轻量级 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,如果该组件使用 shadow DOM 进行封装,则其渲染行为不会受到他们使用的组件的影响。
关于html - Web 组件是否允许嵌套 HTML 表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33640612/