Web 组件输入单选不在组中

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（推荐）

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