Lit元素innerHTML返回带Lit ID的错误值，如何解决？

在使用Lit框架时，点击单选框元素后用.innerHTML获取内容会返回带Lit生成注释ID的结果，而e.target.value能拿到正确值，示例代码如下：

<input
  type="radio"
  value=${item.value}
  .checked=${item.checked}
  @click=${this.toggleRadioCheck}
>

toggleRadioCheck(e) {
  console.log(e.target.innerHTML); // 结果: <!--?lit$5487646469$-->Input One
  console.log(e.target.value); // 结果: Input One
}

要解决这个问题，有几种实用方法：

• 使用textContent替代innerHTML：如果元素内仅包含纯文本，textContent会直接返回不带任何HTML标记的纯文本内容，这是最简洁的方案：

  toggleRadioCheck(e) {
    console.log(e.target.textContent); // 结果: Input One
  }
  

• 正则表达式清除Lit注释：如果必须使用innerHTML，可以用正则匹配并移除开头的Lit专属注释：

  toggleRadioCheck(e) {
    const cleanContent = e.target.innerHTML.replace(/^<!--\?lit\$\d+\$-->/, '');
    console.log(cleanContent); // 结果: Input One
  }
  

• 优先使用表单元素的value属性：对于单选框这类表单元素，value属性本身就是用来存储对应值的标准方式，完全没必要依赖innerHTML，这种方式最可靠且符合语义规范。

内容的提问来源于stack exchange，提问作者Kyle