Lit-element: Confounding error

[bilogic]

Hi,
I have a code that works here https://codepen.io/GS1234/pen/PoYVBgK

There are 3 lines that writes as the following and the work perfectly

this.select = (item) => this.options.map(opt => html`
<option class="opt_${opt.id}" value="${opt.code}">${opt.name} ${opt.match == "" ? "" : "disabled"}</option>
`)

If I rewrite the 3 lines (to move the disable into the option tag), Chrome throws an error that I have no idea how to troubleshoot

this.select = (item) => this.options.map(opt => html`
<option ${opt.match == "" ? "" : "disabled"} class="opt_${opt.id}" value="${opt.code}">${opt.name}</option>
`)

The confounding error is as follows

lit-element.min.js:1 Uncaught (in promise) TypeError: Failed to set the 'currentNode' property on 'TreeWalker': The provided value is not of type 'Node'.
    at new d (lit-element.min.js:1)
    at Object.templateFactory (lit-element.min.js:1)
    at P.__commitTemplateResult (lit-element.min.js:1)
    at P.commit (lit-element.min.js:1)
    at P.__commitIterable (lit-element.min.js:1)
    at P.commit (lit-element.min.js:1)
    at f.update (lit-element.min.js:1)
    at P.__commitTemplateResult (lit-element.min.js:1)
    at P.commit (lit-element.min.js:1)
    at P.__commitIterable (lit-element.min.js:1)

Any help is greatly appreciated. Thank you.

[web-padawan]

This kind of binding is not supported. You should bing to attribute value instead:

<option ?disabled="${opt.match != ''}" class="opt_${opt.id}" value="${opt.code}">

See https://lit-html.polymer-project.org/guide/writing-templates#bind-to-attributes

[bilogic]

Thank you. That solved it.