Do web components allow for nesting of HTML forms?

Question

I'm curious if anything in the works for WebComponents makes it possible to get away with things like nested HTML forms without violating the rules. I'm asking because I'm curious just how isolated the internals of a WebComponent are to the ancestor elements that contain them. I could imagine that if nesting of forms is not possible using WebComponents then that may lead to advice steering components away from containing forms due to the issues that it could cause if a consumer isn't aware of the internals of the component.

Either way I've done bit of digging and couldn't turn up anything so I figured I'd consult with the experts here for more insight.

Related posts:

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

Answer 1

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.