Kebab-case boolean props are casted to string when used in custom elements

[fleebzz]

Vue version

3.2.45

Link to minimal reproduction

https://codesandbox.io/s/adoring-bell-zg9vvr

Steps to reproduce

• Create a SFC component with a camelCase boolean prop
• Use it in your app passing the prop kebab-case
• Prop is well received but casted to string
• If you pass the prop camelCase it works fine

What is expected?

A Boolean prop in the component

What is actually happening?

A String prop in the component

System Info

No response

Any additional comments?

No response

[Tzyito]

I think this problem is related to the online editor. The performance in Vue SFC Playground is normal => here
when i run in native code it works fine

[LinusBorg]

No, it's specific to the combo of a boolean kebap-case prop being passed to a Vue component that's being wrapped with defineCustomElement().

#7412 will solve it for the most part, I think, but would still be an edge case left concerning async custom elements, which I hope to address after we are done with #7412.

[yyx990803]

This is not a bug.

When you declare a prop named testProp for a Vue custom element, the element will have a corresponding testProp DOM property and a test-prop attribute.

• When you do <my-component :test-prop="true" />, you are setting the test-prop attribute via native setAttribute. Even if the value is true, it will be converted to "true" because that's how setAttribute works.
• When you do <my-component :testProp="true" />, Vue notices that the element does have a testProp DOM property, so it sets that DOM property with the boolean value.

It should be kept in mind that a Vue custom element is a custom element that does not assume usage inside a Vue app environment. The framework agnostic way to pass testProp as a boolean attribute should be (see #9697 (comment)):

<my-component test-prop></my-component>

// or, equivalent
<my-component test-prop=""></my-component>
<my-component test-prop="test-prop"></my-component>

The conversion between kebab-case and camelCase props is Vue component specific feature because Vue components do not have the separation between DOM properties vs attributes. We do not encourage authoring Vue custom elements that only work in Vue apps, therefore we do not support special behavior when using Vue custom elements inside a normal Vue app.