fix(custom-elements): cast numbers with Number rules

Fix #4370

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

@@ -0,0 +1,36 @@
+import { toNumber } from '../src/apiCustomElement'
+
+describe('Custom Element', () => {
+  describe('toNumber', () => {
+    it('handles strings', () => {
+      expect(toNumber('')).toBe('')
+      expect(toNumber(null)).toBe('')
+      expect(toNumber('Something else')).toBe('Something else')
+    })
+
+    it('numbers', () => {
+      expect(toNumber('0')).toBe(0)
+      expect(toNumber('1')).toBe(1)
+      expect(toNumber('1.1')).toBe(1.1)
+      expect(toNumber('123e-1')).toBe(12.3)
+      expect(toNumber('Infinity')).toBe(Infinity)
+    })
+
+    it('NaN', () => {
+      expect(toNumber('NaN')).toBeNaN()
+      expect(toNumber('nan')).not.toBeNaN()
+    })
+
+    // all of these are handled by Number
+    it('string non decimal bases', () => {
+      expect(toNumber('0b0')).toBe(0)
+      expect(toNumber('0b1')).toBe(1)
+
+      expect(toNumber('0o3')).toBe(3)
+      expect(toNumber('0o0')).toBe(0)
+
+      expect(toNumber('0x0')).toBe(0)
+      expect(toNumber('0xf')).toBe(15)
+    })
+  })
+})

packages/runtime-dom/src/apiCustomElement.ts

@@ -21,7 +21,7 @@ import {
   ConcreteComponent,
   ComponentOptions
 } from '@vue/runtime-core'
-import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
+import { camelize, extend, hyphenate, isArray } from '@vue/shared'
 import { hydrate, render } from '.'
 
 export type VueElementConstructor<P = {}> = {
@@ -342,3 +342,10 @@ export class VueElement extends BaseClass {
     }
   }
 }
+
+export function toNumber(value: string | null): number | string {
+  // for Number('') and Number(null) as they both become 0
+  if (!value) return ''
+  const casted = Number(value)
+  return value === 'NaN' || !Number.isNaN(casted) ? casted : value
+}