Lit-html: Boolean attributes not rendering

[positlabs]

Demo of the issue

In the docs, there is an example of how to set boolean attributes.

html`<input type="checkbox" ?checked=${checked}>`

However, it doesn't render the attribute when I try it.

html`<input type='checkbox' ?checked=${true}></input>`
// yields <input type='checkbox'></input>

html`<div foo=${true} ?fizz=${true} buzz$=${true}></div>`
// yields <div buzz="true"></div>

[ruphin]

This is because the docs are ahead of the latest release, and this syntax does not work yet.

To install lit-html with the new syntax, install the development release: npm install --save lit-html@dev

[positlabs]

That did the trick, thanks!

[pitus]

I do, however have a problem with checkbox attribute / state rendering.
It works correctly when using ?checked="${state}" ... until I click on the checkbox.
Once clicked, it no longer reacts to state change but remains unchecked (or checked, whatever the last click produced).
This is similar to how input value="${val}" only renders it until we manually change the input value via UI, then it no longer reloads new val, however .value="${val}" will correctly refresh new val (which was a painful process to figure out we should use the property not attribute syntax).
Is there a working equivalent solution for checkboxes (or boolean properties in general) ?
For now I'm forced to find the checkbox by ID and set its .checked property via javascript rather than declaratively, which is a major pain :(

Also, if I use .checked="${state}" it seems to work better (still not right) - once I uncheck it manually, it ignores another change in state to true, false, true, false and finally reacts to another true and gets checked - as if it ignored state change within a time-period or # of changes (I'm yet to do some extra tests on this).

[pitus]

Here's an example of how ?checked is ignored completely once the checkbox was manually clicked, while .checked seems to be behaving correctly (no timeouts actually, just correct behavior).
Declare a test: { type: Boolean } property & then render the following and try clicking various checkboxes:

TEST 1: <input type="checkbox" ?checked="${this.test}" @click="${e => this.test = e.target.checked}"/>
        <input type="checkbox" ?checked="${this.test}" @click="${e => this.test = e.target.checked}"/>
        using ?checked<br>
TEST 2: <input type="checkbox" .checked="${this.test}" @click="${e => this.test = e.target.checked}"/>
        <input type="checkbox" .checked="${this.test}" @click="${e => this.test = e.target.checked}"/>
        using .checked
<b>${this.test}</b>

[justinfagnani]

The solution for checked is the same as for value - bind to the property.

We should make sure that we don't have ?checked=${} in the docs because of that. ?hidden=${} is a better example.

[pitus]

Well, ?disabled is not a problem because we can't disable the control manually from UI so it works fine. The problem is only with attributes that the user can change from the UI such as value= or ?checked=

[ruphin]

Well, lit-html is just a rendering engine. It's up to the developer to respond to user interaction and change the state of the application accordingly. Lit-html can't do this for you, but you can use it to attach event listeners.

[pitus]

Well, I suppose, this should have been a lit-element issue not lit-html ;)

[nboisteault]

In my case neither
<input type='checkbox' ?checked=${true} />
nor
<input type='checkbox' .checked=${true} />

Are able to force checked state when rendered.