From b0b74a160c08941fa9a7a5460f36a1f2fccbf423 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= <t.luenborg@googlemail.com>
Date: Sat, 22 Oct 2022 11:20:46 +0200
Subject: [PATCH] fix(runtime-core): custom-element: ensure number casting of
 camelCase props. (fix: #5374) (#5377)

---
 packages/runtime-dom/__tests__/customElement.spec.ts | 10 +++++-----
 packages/runtime-dom/src/apiCustomElement.ts         |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index e29c36123f3..300cc2322ce 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -135,14 +135,14 @@ describe('defineCustomElement', () => {
     test('attribute -> prop type casting', async () => {
       const E = defineCustomElement({
         props: {
-          foo: Number,
+          fooBar: Number, // test casting of camelCase prop names
           bar: Boolean,
           baz: String
         },
         render() {
           return [
-            this.foo,
-            typeof this.foo,
+            this.fooBar,
+            typeof this.fooBar,
             this.bar,
             typeof this.bar,
             this.baz,
@@ -151,7 +151,7 @@ describe('defineCustomElement', () => {
         }
       })
       customElements.define('my-el-props-cast', E)
-      container.innerHTML = `<my-el-props-cast foo="1" baz="12345"></my-el-props-cast>`
+      container.innerHTML = `<my-el-props-cast foo-bar="1" baz="12345"></my-el-props-cast>`
       const e = container.childNodes[0] as VueElement
       expect(e.shadowRoot!.innerHTML).toBe(
         `1 number false boolean 12345 string`
@@ -161,7 +161,7 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(`1 number true boolean 12345 string`)
 
-      e.setAttribute('foo', '2e1')
+      e.setAttribute('foo-bar', '2e1')
       await nextTick()
       expect(e.shadowRoot!.innerHTML).toBe(
         `20 number true boolean 12345 string`
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index eabe83b6b9f..5ff45d652f2 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -268,10 +268,11 @@ export class VueElement extends BaseClass {
 
   protected _setAttr(key: string) {
     let value = this.getAttribute(key)
-    if (this._numberProps && this._numberProps[key]) {
+    const camelKey = camelize(key)
+    if (this._numberProps && this._numberProps[camelKey]) {
       value = toNumber(value)
     }
-    this._setProp(camelize(key), value, false)
+    this._setProp(camelKey, value, false)
   }
 
   /**