Today we will analyze Pull Request #91 to VueJS to learn about boolean attributes in HTML. This PR perfectly demonstrates how basic web development fundamentals can be all that's required to make a meaningful contribution.
Pull request introduction
Learning about boolean attributes
@th0r provided the following example to demonstrate how VueJS users were
wanting to dynamically toggle the
disabled state of a
Suppose we were wanting to determine whether a
<button> should be enabled or
In HTML, the way we indicate we want a button to be enabled(clickable) or not is
with the disabled attribute. (Note: there is no
enabled attribute - only
VueJS users were wanting to specify the above scenario like so:
<button type="submit" v-attr="disabled: !submissionAllowed">
submissionAllowed was set to
true, then the
should be set to
false, enabling the
<button>. If, on the other hand,
submissionAllowed was set to
false, we would want the
disabled attribute to
true so the
<button> would be disabled.
But unfortunately that does not work. Observe the following pairings of html followed by the resulting button. Attempt to click on each one of them.
<button type="submit" disabled="true">Can you click me?</button>
<button type="submit" disabled=true>Did you try?</button>
<button type="submit" disabled="false">Have any luck?</button>
<button type="submit" disabled=false>How about this one?</button>
<button type="submit" disabled="">Or maybe this one?</button>
<button type="submit" disabled>Perhaps this one?</button>
<button type="submit">It works!</button>
The only clickable button was the last
<button> element. That particular
button had the
disabled attribute completely omitted. Is this a bug?
disabled=false cause the
<button> to be enabled?
What the W3C says
The following quoted portions come from the official HTML5 specification from the W3C:
2.4.2 Boolean attributes
A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
<button type="submit" disabled="false">This will be disabled</button>
<button type="submit" disabled="hahah">This will be disabled</button>
<button type="submit">This will be enabled</button>
disabled attribute existing at all in the element means "yes, this
element should be disabled". Regardless of the value of the attribute, its
presence indicates it should be disabled.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
Although this appears to be somewhat contradictory to the previous paragraph,
this [Stackoverflow answer] offers a solid explanation. To summarize, the only
values for the
disabled attribute the HTML5 standard deems as valid are:
This applies to all boolean attributes (such as
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
This is a corollary of the first paragraph. The W3C clearly specifies that even the magic words "true" and "false" are invalid values for boolean attributes.
This means the only valid uses of
disabled on our button are:
<button type="submit" disabled>This is valid</button> <button type="submit" disabled="">This is valid</button> <button type="submit" disabled="disabled">This is valid</button> <button type="submit">This is valid</button>
@th0r was able to create an impactful contribution to VueJS thanks to his knowledge of boolean attributes in HTML. This PR demonstrates that even the most basic knowledge, when applied correctly, can make a big difference!