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
Support boolean attributes (#91) was submitted for review in February 2014. @th0r, the PR author, provided an example of how VueJS at the time did not properly support boolean attributes.
Learning about boolean attributes
@th0r provided the following example to demonstrate how VueJS users were
wanting to dynamically toggle the disabled state of a <button> element.
Suppose we were wanting to determine whether a <button> should be enabled or
disabled based upon the value of a JavaScript variable. Lets call this
hypothetical variable submissionAllowed.
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
disabled.)
VueJS users were wanting to specify the above scenario like so:
<button type="submit" v-attr="disabled: !submissionAllowed">
Ideally, if submissionAllowed was set to true, then the disabled attribute
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
be 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?
Shouldn't 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.
To demonstrate:
<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>
Thus the 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:
""/''"disabled"
This applies to all boolean attributes (such as selected).
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>
Conclusion
@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!