defineCustomElement uses incorrect props type mapping

[WoJiaoFuXiaoYun]

Vue version

v3.4.0-alpha.3

Link to minimal reproduction

https://play.vuejs.org/#eNqNU02P2yAQ/SuISxzJxpXSU5SsdrfKoT20VbtHX7z2OGYXA4JxkirKf++A43wprfYEzLx5PN4Me/5krdj0wOd84SsnLTIP2NuHQsvOGodsz2popIYvvUfTrRR0oDEdg4ZAOgbalDloUqZhhy+yemcH1jjTsQmxTwpdGe2RObYMqGQ6Bq5YKXlDm+wLzZh1xvp53DLWln7OjnvG8I+FOXs2RkGp0zFKLGWvcM6aUnkYooewHCLEga7BJdMji6MHO83aZFLLzSQNlKZh2Eov6DKSGosPtCn0VurabEV1KduLQXUyGcJZpLnjWnJ1mkbC0a4kmS4foiAnNqXqQVAfnhCdfO2RqEnJJGXoeqCyoGWRD/2iTtEBobOqRKDTgq6nhbHFWU4wfVlwV/A8IPIBsshPZTzl6KkljVyLN280zUMUU/CKeiEVuB8WJbWs4Cf3C14qZbbfYiwoO/pPNS1U73fib34XYgX/6cCD20DBTzks3RpwSK9+fydbLpKdqXtF6P8kf4E3qg8aB9hzr2uSfYGLar/GqZZ6/eJXOwTtx0cFoecRKTiNbRjDfz39LHcmZuOIkIvDr8m60t74OCSuSeiOQWyLSBOe51WtqawGJTdOaMBc2y5/JFjueo2yg6w23eNMfBafslLZthQz6qXHy7QA32WvzmzJYUFfpybGCxcCWfTeZcM/CB59TMNN2T0dN5ArLUHGyanDX/rIhwA=

Steps to reproduce

Not needed

What is expected?

Attributes are always reflected to corresponding properties.

According to the document description, it should actually be of type Boolean

What is actually happening?

Page displays string

System Info

No response

Any additional comments?

No response

[LinusBorg]

The has prop, when set as an attribute on the custom element, is just a plain normal HTML attribute, not a boolean attribute.

Normal attributes are always strings.

nextTick(()=>{
  // when using setAttribute, use an empty string: 
  r.value.setAttribute('has', '') 
  // when setting as a DOM prop, use a boolean value:
  r.value.has = true
})

Either of the above will result in the boolean prop being cast correctly.

Now, we could add additional magic to properly convert 'true' and 'false' to true and false, but the current behaviour is not wrong per se.

[WoJiaoFuXiaoYun]

The prop, when set as an attribute on the custom element, is just a plain normal HTML attribute, not a boolean attribute.has

Normal attributes are always strings.

nextTick(()=>{
  // when using setAttribute, use an empty string: 
  r.value.setAttribute('has', '') 
  // when setting as a DOM prop, use a boolean value:
  r.value.has = true
})

Either of the above will result in the boolean prop being cast correctly.

Now, we could add additional magic to properly convert and to and , but the current behaviour is not wrong per se.'true'``'false'``true``false

I think we need some magic 🦄

[WIStudent]

Now, we could add additional magic to properly convert 'true' and 'false' to true and false

I would advise against adding some conversion magic. The HTML Living Standard explicitly states:

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.

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.

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

https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

[WoJiaoFuXiaoYun]

Now, we could add additional magic to properly convert 'true' and 'false' to true and false

I would advise against adding some conversion magic. The HTML Living Standard explicitly states:

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.
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.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes

I personally feel that, at present, the philosophy of Vue conflicts with the HTML Living Standard. When I wrote the following code, I interpreted it with the mindset of Vue, but the outcome did not meet expectations. I believe the Vue team will make a judgment on how to choose.

[yyx990803]

Vue is following the spec here.

• r.value.setAttribute('has', true) -> invalid for a boolean attribute, so casted as string "true"
• r.value.setAttribute('has', '') OR r.value.setAttribute('has', 'has') -> valid for a boolean attribute, converted into boolean true and working as expected.
• r.value.has = true -> directly setting the property. Works as expected.