Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

HTML5 Boolean Attributes #1972

Copy link
Copy link
Open
Open
Copy link
@dacohen

Description

@dacohen
Issue body actions

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 vuejs/vue#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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.