Boolean Attributes are a special kind of attribute in HTML which acts as a yes/no switch.
Typically the understanding is that if the attribute exists at all, with any value whatsoever, that it is considered as a "true" state. If it does not exist, then "false."
However the reality is that the rules are inconsistent here, and vary by attribute.
These variations split into two distinct traps.
1. Presence is meaningful, but a value refines it
These act boolean (just writing the attribute does something), yet an optional value changes the behavior:
Note sandbox is backwards from intuition: adding tokens loosens it.
2. Look boolean, but ="false" actually works
This is the nastier category, because it inverts the rule you learn from disabled/checked (where disabled="false" still disables):
contenteditable--true|false|plaintext-only; bare = truespellcheck--true|falsedraggable--true|false(bare is invalid; default is auto)translate--yes|nowritingsuggestions,autocorrect--true|false
So Value is ignored entirely for: For all of these, the only way to turn them off is to remove the attribute -- which is why frameworks special-case them (React drops the attribute on is still disabled. Same-looking syntax, opposite outcomes.The actually-pure booleans
disabled, checked, readonly, required, multiple, selected, open, autofocus, novalidate, formnovalidate, async, defer, nomodule, ismap, reversed, loop, muted, autoplay, controls, playsinline, default, inert, allowfullscreen, itemscope, shadowrootclonable.false, Vue does the same for its known boolean list).
