HTML5 Boolean attributes always set

… yes, we shouldn’t complain now that there are massively efficient custom attributes! Alas boolean attributes don’t work because they are set once the attribute exists, which means using valueNames like

{
  name: 'sticky',
  attr: 'checked'
},

produces

<input class="sticky" checked="" type="checkbox">

which even with an empty value still counts as a set attribute (eg. checkbox is rendered checked)

Is there

1. some way to not output empty attributes or
2. override/filter the attribute output function or
3. some other way I didn’t get?

As stated in the title this concerns all boolean attribures like disabled, slected, checked and so on, which would be especially helpful for inline form elements.

[mcglonelevi]

I don’t think CSS selectors containing [attribute] would be that difficult to get around. There are many like:

:disabled
:checked
:optional
:enabled

That are used to select boolean attributes purely on whether or not a property exists.

The setAttribute logic should look something like this:

const blacklist = ['disabled', 'checked'];

function setAttribute(name, value) {
    if (blacklist.indexOf(name) === -1) {
       // run regular setAttr logic
    } else {
        // run logic to add/remove attr based on true/false
    }
}

Am I missing something?

[Stolzenhain]

@mcglonelevi : This looks good! Thinking this over, a less embracing approach (e.g. w/o new functions or overrides) could be patched in the setValue() function like this – canceling the function if it tries to set an empty boolean attribute:

// make sure HTML5 booleean attributes don't contain empty values
const blacklist = ['disabled', 'checked'];
if (
  (value.length < 1) && //empty value
  (blacklist.indexOf(name) > -1) //
)
  return;

–

I don’t think CSS selectors containing [attribute] would be that difficult to get around. There are many like:

What I was implying is that there might already be JS or CSS selector code that takes into account generated empty attributes (like data- attributes or empty src values) and could potentially break current sites if we generally removed all empty attributes (e.g. no blacklisting).