diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 09ee971d2..6c991b9f5 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('"
foo
"')
})
+
+ // # 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 ebb1eccc0..ecb558b17 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
}
}
}