HTML boolean attributes break dynamic expressions

Boolean attributes such as the checked attribute on a checkbox seem unable to be set by dynamic expressions.

Example:

This renders and behaves as expected when the checked attribute is static:

html`<input type="checkbox"
  ${data.foo ? 'checked' : ''}
  @input="${e => data.foo = e.target.checked}"
/>`

However, if we make the checked attribute dynamic, two things go wrong:

html`<input type="checkbox"
  ${() => data.foo ? 'checked' : ''}
  @input="${e => data.foo = e.target.checked}"
/>`

(1) It renders like this in the browser, with an unchecked checkbox followed by some mangled code as plain text. (The name of the attribute, checked, seems to replace the value of the next attribute, @input.)

☐ @input="checked" />

(2) The @input event doesn't fire when the checkbox is clicked.

Workaround:

Checkboxes can be made to work by making the checked attribute static and then manipulating the checkbox DOM element directly when the value changes, with $on.

Here's a generalized implementation of the workaround that I've only tested with checkboxes:

function booleanHack(data, prop, attr) {
  let hackAttr = `boolean-hack="${prop}"`;
  data.$on(prop, () => {
    document.querySelectorAll(`[${hackAttr}]`).forEach(el => {
      el[attr] = data[prop];
    });
  });
  return hackAttr;
}

html`<input type="checkbox"
  ${booleanHack(data, 'foo', 'checked')}
  ${data.foo ? 'checked' : ''}
  @input="${e => data.foo = e.target.checked}"
/>`