Why are disabled="false" and disabled passed as attrs eventually rendered as disabled="" ?

[gzf6]

<button disabled>test</button>
<button disabled="false">test</button>

We know that the above two situations express completely opposite meanings, but the actual output results are the same.

<button disabled="">test</button>

[JohnieXu]

<button disabled>test</button> equals <button :disabled="true">test</button>
<button disabled="false">test</button> equals <button :disabled="true">test</button> samely

please notice that colon before disabled.

[gzf6]

I can understand the convenience of using Booleanish types for enum properties (eg: draggable). But for Boolean attributes, it seems that there is no need to add an enumeration type, not to mention that its output result is counter-intuitive.

[Justineo]

I think it's a bug to mark boolean attributes as Booleanish and you are right Booleanish should be used for enum attributes like draggable or aria-disabled.

[gzf6]

Maybe this MDN article explains this problem better

[JohnieXu]

Maybe this MDN article explains this problem better

I think it's a nice explainnation

[gzf6]

So the question now is, is defining disabled as Booleanish in @vue/runtime-dom a bug or is there more considerations? Is there anyone relevant who can answer this question?

[hubdidub]

Your initial assumption is wrong:

<button disabled="false">test</button>

is not setting disabled to false.
That's because of the way boolean attributes work in HTML, explained by the MDN article posted in the other comment.
So it definitely makes sense that these two are equivalent:

<button disabled>test</button>
<button disabled="false">test</button>

The false part is not treated by Vue as boolean false, it's a string that might as well be foo.

In Vue, if you do this:

<button :disabled="false">test</button>`

then the false is basically interpreted as a Javascript expression, so it's actually the boolean literal. And that is a way to effectively remove the disabled attribute completely from the rendered result.

So that should be one part of the answer: Vue is just following the HTML specifications.

The other part of the question, why Vue picks one representation over another.
But according to my testing, it gets actually rendered as:
<button disabled>test</button> and not <button disabled="">test</button> as you claimed. My guess is: It's just the shortest version that represents a boolean attribute and HTML5 compliant. Shorter HTML = Faster page loading

[gzf6]

I agree with what you said.
Now a further question is, why is disabled in @vue/runtime-dom defined as Booleanish instead of boolean?
When a user sets disabled to "false" instead of false according to the current type hint, counter-intuitive results will be obtained.

[hubdidub]

ah, now I understand what you were talking about in the other thread. So when you use Typescript, then

<button disabled="foo">test</button>

is a type-error, which makes sense, but:

<button disabled="false">test</button>

is fine, even though it's the same.

Yeah, seems wrong to me too!