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'.
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)}>`