Boolean Attributes

[Jakub Pelák]

I am wondering what is the reason behind setting boolean attributes doesn't work like this:

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

I understand that you could do either checked=${booleanValue || null} (which is quite odd) or pass it as a value .checked=${booleanValue}. Such statements trigger my OCD, so I had to ask... 😉

You mentioned here #23 (comment) that "you want to put a dot in front". Are there any performance benefits to using value instead of attribute?

Thanks!

[Andrea Giammarchi]

it's not just boolean, it's any attribute with a counter API in JS that does the right thing for you.

checked=${false} as attribute, here, is checked="false" while .checked=${false} is input.checked = false which either removes or places the attribute in there.

The type, as <textarea .value=${...}> or <option .selected=${...}>, or any other value that has an accessor, avoids repeated checks on the attribute presence, as that's done behind the scene, so it's faster than if (!value && el.hasAttribute(name)) el.removeAttribute(name); else if (value) el.setttribute(name, value); as it's just el[name] = value and that's how uhtml keeps itself one of the smallest libraries of its kind out there.

However, if you prefer having "magic" around attributes, you can always upgrade to lighterhtml 👋