Web Component Input radio 不在一个组中

Question

我有 WC <m-form> 是我的表单和输入字段的包装器。在 m-form 的 renderHTML() 中，我这样做：

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)
        })
    })
  }

这将 <input> 和 <label> 包装在 <a-input> WC 中。
但是当我想对

做同样的事情时

<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>

他们不在一个组中。

我该怎么做才能将它们组合在一起，而且还包含在 <a-input> 中？

这是网站上的代码以及渲染出来的内容。

Answer 1

shadowDOM 封装了CSS、HTML和行为

您的两个输入都在 shadowDOM 中。这就像将它们放入 2 不同的 个 IFRAME。
他们不知道存在另一个输入

删除 shadowDOM
或者，加载更多工作，添加事件以使输入相互通信

Web Component Input radio 不在一个组中

Web Component Input radio not in a group

input

radio-group

web-component