diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index df1d5a9c4db..329364b76ab 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -231,6 +231,23 @@ describe('defineCustomElement', () => { el['max-age'] = 100 expect(el.maxAge).toBe(100) }) + + test('set number value in dom property', () => { + const E = defineCustomElement({ + props: { + maxAge: Number + }, + render() { + 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('emits', () => { diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 1ae98362611..7772f50386b 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -222,10 +222,12 @@ export class VueElement extends BaseClass { // cast Number-type props set before resolve let numberProps if (hasOptions) { - 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]) + if (key in this._props) { + this._props[key] = toNumber(this._props[key]) + } ;(numberProps || (numberProps = Object.create(null)))[key] = true } }