This seems like a very valid question to me.
Out of curiosity, I made a quick fiddle (provided below) which tests use case of nested forms, where one is inside 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 it works as expected, when you submit form which is in light DOM which includes a form in shadowRoot of one of the elements, both of them render perfectly fine.
just how isolated the internals of a WebComponent are to the ancestor
elements that contain them
Shadow Root is different node associated with a particular element, it cannot be accessed with regular DOM manipulation APIs and therefore won't interfere with light DOM markup, in this case form-within-form rule.
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.
So to answer this question, 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.
