fix(custom-element): correctly handle number type props in prod

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -10,6 +10,7 @@ import {
   renderSlot,
   VueElement
 } from '../src'
+import { expect } from 'vitest'
 
 describe('defineCustomElement', () => {
   const container = document.createElement('div')
@@ -283,6 +284,25 @@ describe('defineCustomElement', () => {
       expect(el.maxAge).toBe(50)
       expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
     })
+
+    // #8987
+    test('Correctly handle number type props in prod', () => {
+      const E = defineCustomElement({
+        props: {
+          foo: {
+            default: 5
+          }
+        },
+        render() {
+          // @ts-ignore
+          return `foo: ${typeof this.foo}`
+        }
+      })
+      customElements.define('my-element-number-property-prod', E)
+      container.innerHTML = `<my-element-number-property-prod foo="5.5"></my-element-number-property-prod>`
+      const e = container.childNodes[0] as VueElement
+      expect(e.shadowRoot!.innerHTML).toBe('foo: number')
+    })
   })
 
   describe('attrs', () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -255,7 +255,10 @@ export class VueElement extends BaseClass {
       if (props && !isArray(props)) {
         for (const key in props) {
           const opt = props[key]
-          if (opt === Number || (opt && opt.type === Number)) {
+          if (
+            opt === Number ||
+            (opt && (opt.type === Number || typeof opt.default === 'number'))
+          ) {
             if (key in this._props) {
               this._props[key] = toNumber(this._props[key])
             }
@@ -360,6 +363,7 @@ export class VueElement extends BaseClass {
   }
 
   private _createVNode(): VNode<any, any> {
+    console.log('####', this._props)
     const vnode = createVNode(this._def, extend({}, this._props))
     if (!this._instance) {
       vnode.ce = instance => {