如何访问shadowroot中的值

Question

我想知道如何在shadowroot中获取价值

this.shadowRoot.getElementById("sending"); //not working

render() {
${this.value.map((e)=>{
<div class="form-check pb-2"  class="radio_send">
    <input class="form-check-input" name="sending" type="radio" id="sending" value="bank transfer" checked>
     <input class="form-check-input" name="sending" type="radio" id="sending" value="credit">
 </div>
});
}

Answer 1

这取决于您调用 this.shadowRoot 的位置 - 在 firstUpdated 之前它可能不会保存任何东西，即使它这样做了 getElementById("sending") 也只会返回第一个 bank transfer 单选按钮this.value 中的第一个条目。

相反，您希望用户操作为您提供价值：

render() {
    return html`${this.value.map(e => {
<div class="form-check pb-2 radio_send">
    <input class="form-check-input" name="sending" type="radio" value="bank transfer" checked
        @change=${this.setSendingState}>
    <input class="form-check-input" name="sending" type="radio" value="credit"
        @change=${this.setSendingState}>
</div>})`;
}

setSendingState(e) {
    this.sendingState = event.target.value;
}