From 89f37ceb62363c77697d177675790a9ab81ba34f Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 11 Nov 2022 15:18:46 +0800
Subject: [PATCH] fix(custom-elements): fix number type props casting check

fix #5793
adapted from #5794
---
 .../__tests__/customElement.spec.ts           | 19 +++++++++++++++++++
 packages/runtime-dom/src/apiCustomElement.ts  | 10 +++++++---
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 09ee971d225..6c991b9f523 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -228,6 +228,25 @@ describe('defineCustomElement', () => {
       await nextTick()
       expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
     })
+
+    // # 5793
+    test('set number value in dom property', () => {
+      const E = defineCustomElement({
+        props: {
+          'max-age': Number
+        },
+        render() {
+          // @ts-ignore
+          return `max age: ${this.maxAge}/type: ${typeof this.maxAge}`
+        }
+      })
+      customElements.define('my-element-number-property', E)
+      const el = document.createElement('my-element-number-property') as any
+      container.appendChild(el)
+      el.maxAge = 50
+      expect(el.maxAge).toBe(50)
+      expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
+    })
   })
 
   describe('attrs', () => {
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index ebb1eccc0bd..ecb558b17a4 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -234,11 +234,15 @@ export class VueElement extends BaseClass {
       // cast Number-type props set before resolve
       let numberProps
       if (props && !isArray(props)) {
-        for (const key in this._props) {
+        for (const key in props) {
           const opt = props[key]
           if (opt === Number || (opt && opt.type === Number)) {
-            this._props[key] = toNumber(this._props[key])
-            ;(numberProps || (numberProps = Object.create(null)))[key] = true
+            if (key in this._props) {
+              this._props[key] = toNumber(this._props[key])
+            }
+            ;(numberProps || (numberProps = Object.create(null)))[
+              camelize(key)
+            ] = true
           }
         }
       }