Skip to content

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

Open
@lejunyang

Description

@lejunyang

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.has workaroundA workaround has been found to avoid the problemscope: custom elements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions