fix(runtime-dom): support Symbol for input value bindings (#10608)

close #10597

Author: xw616525957

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

@@ -53,4 +53,20 @@ describe('runtime-dom: attrs patching', () => {
     patchProp(el, 'onwards', 'a', null)
     expect(el.getAttribute('onwards')).toBe(null)
   })
+
+  // #10597
+  test('should allow setting attribute to symbol', () => {
+    const el = document.createElement('div')
+    const symbol = Symbol('foo')
+    patchProp(el, 'foo', null, symbol)
+    expect(el.getAttribute('foo')).toBe(symbol.toString())
+  })
+
+  // #10598
+  test('should allow setting value to symbol', () => {
+    const el = document.createElement('input')
+    const symbol = Symbol('foo')
+    patchProp(el, 'value', null, symbol)
+    expect(el.value).toBe(symbol.toString())
+  })
 })

packages/runtime-dom/src/modules/attrs.ts

@@ -36,7 +36,8 @@ export function patchAttr(
     if (value == null || (isBoolean && !includeBooleanAttr(value))) {
       el.removeAttribute(key)
     } else {
-      el.setAttribute(key, isBoolean ? '' : value)
+      // attribute value is a string https://html.spec.whatwg.org/multipage/dom.html#attributes
+      el.setAttribute(key, isBoolean ? '' : String(value))
     }
   }
 }

packages/runtime-dom/src/modules/props.ts

@@ -38,7 +38,7 @@ export function patchDOMProp(
     // compare against its attribute value instead.
     const oldValue =
       tag === 'OPTION' ? el.getAttribute('value') || '' : el.value
-    const newValue = value == null ? '' : value
+    const newValue = value == null ? '' : String(value)
     if (oldValue !== newValue || !('_value' in el)) {
       el.value = newValue
     }