vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.75k stars 8.34k forks source link

Cannot properly set numberish attribute(like tabindex) or boolean attribute on Vue custom element #12408

Open lejunyang opened 6 days ago

lejunyang commented 6 days ago

Vue version

3.5.0+

Link to minimal reproduction

https://play.vuejs.org/#eNqNU8Fu2zAM/RVWF7tAmnTIdvHcYFuRw3bYhm23ahgcm07UypIh0UmKIP8+So6TrOiKniSSj4+PpLQTH9t2vO5QZCL3pVMtgUfq2pk0qmmtI9hBhbUyeNt5ss1cY4OGRrAagcMa9lA720DCFIk00pTWeALUcPNcWrqTBjjPVOjSS4hWsKlzBlZpUql1wtRp4rWl5PIyxPfS7Pmi6vSiPOfy4yVSmjSPV4Q+gOFJuK9/QoxYFhMNGoOPVXITKbkOYySf9DPg7tkgbFpdELIFkC86Imsgo2KhWP/2RoprKSCrCipiAXaEg30fSq3Kh4PNNS56/6ynyCf9eaB1MOlvB52vqTDjAW8UrcB0zQIdDBlQmAoW1mosDIQ0KIhcPjlQ/6/ik4L/1OPRnNXz5JRZRlZ/TptPzobFpqdHHa53J64kUCW/+6WXVluXwdIhMpxXfHfUkFwPoNoautqgWq4o4640P5r3EcxrivxiJMjzNmu1HN97a/gRx0QpStu0SqP71pLibUuRDY9NikJru/kSfUHSaPCXKywfnvHf+23wSfHdoUe35nkcY1Q4foV9eP7zK275fgw2tuo0o18I/kBvdRc09rBPnalY9hkuqv0cvyJP/pefbwmNH5qK6wmfJOKl4G94+0LrJ7nT8dvhc/EU/6zRBU4e4HT8bvxmKvZ/AfyUZCQ=

Steps to reproduce

Observe the render result, we can see the second custom element doesn't have tabindex or data-test attribute, they are set on its properties, not attributes

What is expected?

Should have correct attributes

What is actually happening?

I believe this is coming from below in packages\runtime-dom\src\patchProp.ts

// #11081 force set props for possible async custom element
(el as VueElement)._isVueCE &&
(/[A-Z]/.test(key) || !isString(nextValue))

All non-string props with no capitals are set as element's properties

System Info

No response

Any additional comments?

No response