javascript - 如何访问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>
});
}

标签： javascriptjqueryhtmllit-elementlit-html

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