Error if client side validation constraints are used with shadow DOM

[ryanbethel]

This relates to issue 5 that describes how extra elements can be included in the "light DOM" due to how Enhance does SSR. These elements will not be rendered if there is not a slot as described in that issue. BUT if they are inputs that have some constraints for client side validation they will throw an error blocking form submission as An invalid form control with name='something' is not focusable.

Steps to Reproduce

With the following component:

module.exports = function MyInputTemplate(state = {}, html) {
  return html`
    <input required type="email"/>

    <script type="module">
      class MyInput extends HTMLElement {
        constructor() {
          super()
          const template = document.getElementById('my-input-template')
          this.attachShadow({ mode: 'open' }).appendChild(
            template.content.cloneNode(true),
          )
        }
      }

      customElements.define('my-input', MyInput)
    </script>
  `
}

If you try to render:

html`<form>
      <my-input></my-input>
   </form>
`

You will not be able to submit the form because the form will try to validate the non-rendered form input in the light DOM and throw an error blocking submission. There are other problems with the form state being hidden from submission in the shadow DOM discussed here.

Solution???

One solution is to clean up this non-rendered input by removing it or maybe surgically removing the constraints. But that gets messy quick if we are trying to generalize this so end users don't have to deal with it. I think it raises a fundamental problem about what to do with these extra elements in the light DOM. I bet we will find other similar problems with the same root cause.

[kristoferjoseph]

This is a client side concern and we get to side-step this in SSR.

Element internals has landed so we can implement handling for this in a base class.