Subscribe on changes!

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

avatar
Dec 22nd 2022

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

avatar
Dec 26th 2022

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

avatar
Dec 26th 2022

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().

https://github.com/vuejs/core/pull/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.