CODEWITHSUNDEEP
javascriptlit-elementlit
Kyle
Kyle

Reputation: 55

Lit element innerHTML showing incorrect value

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:

Upvotes: 0

Views: 319

Answers (1)

Christian
Christian

Reputation: 4104

I don't know why exactly you don't want to use the value, because that would be the correct way in this example. I am using the following function when I write snapshot tests to remove those comments:

export const cleanHTML = (el: Element): string => {
  const innerHTML = el.shadowRoot!.innerHTML;
  return innerHTML.replace(/<!--([\s\S]*?)-->/g, '');
};

So the call would be in your example:

console.log(cleanHTML(e.target));

Upvotes: 1

Related Questions