HTML5 Boolean Attributes

What problem does this feature solve?

According to the HTML5 spec:

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

- https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

For several reasons, especially using Custom Elements / Web Components, it would be helpful to be able to set attributes without corresponding values, in order to comply with the standard. For example, <input :disabled="true"> should generate <input disabled> not <input disabled="true". <input :disabled="false"> should generate <input> not <input disabled="false">.

It seems that <input :disabled="isDisabled ? '' : null"> gets close (correctly handing the false case), but this still generates <input disabled=""> in the true case.

What does the proposed API look like?

This exact issue was discussed back in 2016, for Vue 2 (See https://github.com/vuejs/vue/issues/2169). The decision was to add a .boolean modifier to v-bind.

In the above example, you could then write <input :disabled.boolean="true"> which would generate <input disabled> and <input :disabled.boolean="false"> which would generate <input>.

Has this change, or an equivalent one, made it into Vue 3? If not, and the decision made in 2016 still makes sense, I'm happy to contribute a PR.

No documentation file or test is named. Start by checking the Vue 3 documentation and the referenced Vue 2 discussion, then compare the proposed boolean-attribute behavior with the HTML5 specification. Done means documenting whether Vue 3 supports this behavior and, if not, describing the accepted API or next step.