0

While building a WebComponent using Lit-Element and Typescript I got this rather cryptic error message.

The error occurs when I try to set the checked attribute to an element.

The culprit is something similar to this:

    return html`<input type="radio" ${(testValue==0 ? "checked":"")}>`

The error message is

TypeError: Failed to set the 'currentNode' property on 'TreeWalker': The provided value is not of type 'Node'.
ndvo
  • 939
  • 11
  • 16

1 Answers1

6

After some research, I finally understood the problem. I was thinking I could treat the template string basically as a templating language. Instead of thinking about this as a command ('print this, print that'), one should think about it as a description to be interpreted by a function. Surely you need to know about the interpreter function.

In my case, I was trying to conditionally render a property. That is if a condition is met, print this, if it is not, print nothing.

The documentation is pretty clear about the issue: https://lit-html.polymer-project.org/guide/writing-templates#bind-to-attributes

The solution in my case was:

    return html`<input type="radio" ?checked=${(testValue==0)}>`
ndvo
  • 939
  • 11
  • 16