Web Component Input radio not in a group

Question

I have the WC <m-form> witch is the wraper for my form and the input fields. In the renderHTML() of m-form i do this:

renderHTML() {
    this.loadChildComponents().then(children => {
      Array.from(this.root.querySelectorAll('input'))
        .filter(i => i.getAttribute('type') != "hidden").forEach(input => {
          const label = this.root.querySelector(`label[for=${input.getAttribute("name")}]`)
          const aInput = new children[0][1](input, label, { namespace: this.getAttribute('namespace') || ''})
          aInput.setAttribute('type', input.getAttribute('type'))
          input.replaceWith(aInput)
        })
    })
  }

This wraps <input> and <label> in an <a-input> WC.
But when I want to do the same with

<input type="radio" id="gender1" name="gender" value="herr">
<label for="gender1">Herr</label>
<input type="radio" id="gender2" name="gender" value="frau">
<label for="gender2">Frau</label>

they are not in a group.

What can i do to get them grouped together but also in the <a-input>?

Here is the Code on the site and what got rendered out.

Answer 1

shadowDOM encapsulates CSS, HTML and behavior

Both you inputs are in shadowDOM. That is like putting them into 2 different IFRAMEs.
They have no clue another input exists

• Remove shadowDOM (recommended)

• or, loads more work, add Events to make the inputs communicate with each other