When using an on click event to get the value of clicked element, using .innerHTML
it returns the lit element ID too:
<input
type="radio"
value=${item.value}
.checked=${item.checked}
@click=${this.toggleRadioCheck}
>
toggleRadioCheck(e) {
console.log(e.target.innerHTML); // Result: <!--?lit$5487646469$-->Input One
console.log(e.target.value); // Result: Input One
}
As you can see using e.target.value
is returning the correct value but using e.target.innerHTML
picks up the LIT ID too. When lit components are rendered in shadow DOM LIT attaches a commented ID associated to the component, but hoping there was a way to use innerHTML
to get the value.
How can avoid returning the ID generated by LIT. This: