fix(runtime-core): allow setting props to object if prop is not expecting string

Author: Jason Yu

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

@@ -75,4 +75,37 @@ describe('runtime-dom: props patching', () => {
     expect(root.innerHTML).toBe(`<div>bar</div>`)
     expect(fn).toHaveBeenCalled()
   })
+
+  // #1049
+  test('set domProps where string is not accepted', () => {
+    const realCreateElement = document.createElement.bind(document)
+    const spyCreateElement = jest
+      .spyOn(document, 'createElement')
+      .mockImplementation(tagName => {
+        const el = realCreateElement(tagName)
+        let srcObject: any = undefined
+        Object.defineProperty(el, 'srcObject', {
+          enumerable: true,
+          set(v) {
+            if (typeof v === 'string') {
+              throw new TypeError(
+                `Failed to set the 'srcObject' property on 'HTMLMediaElement'`
+              )
+            }
+            srcObject = v
+          },
+          get() {
+            return srcObject
+          }
+        })
+        return el
+      })
+
+    const el = document.createElement('video')
+
+    patchProp(el, 'srcObject', undefined, null)
+
+    expect(el.srcObject).toBeNull()
+    spyCreateElement.mockRestore()
+  })
 })

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

@@ -31,7 +31,21 @@ export function patchDOMProp(
   if (value === '' && typeof el[key] === 'boolean') {
     // e.g. <select multiple> compiles to { multiple: '' }
     el[key] = true
-  } else {
+  } else if (isStringAttribute(el.tagName, key)) {
     el[key] = value == null ? '' : value
+  } else {
+    el[key] = value
+  }
+}
+
+function isStringAttribute(tagName: any, key: string) {
+  try {
+    // some dom properties accept '' but not other strings, e.g. <video>.volume
+    document.createElement(tagName)[key] = 'test string'
+    return true
+  } catch (e) {
+    if (e.name !== 'TypeError') throw e
+
+    return false
   }
 }