fix(runtime-dom): preserve nullish values for custom element properties

Custom element properties may accept multiple types, so when a nullish
value (null/undefined) or empty string is passed, Vue should not coerce
it based on the existing property type. Previously, null would be
coerced to 0 for number props, '' for string props, and '' would be
coerced to true for boolean props on custom elements.

close #14209

Author: apoorvdarshan

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

@@ -65,7 +65,8 @@ describe('runtime-dom: props patching', () => {
     expect(el.value).toBe('foo')
     expect(el.setterCalled).toBe(1)
     patchProp(el, 'value', null, null)
-    expect(el.value).toBe('')
+    // #14209: custom elements should preserve nullish values as-is
+    expect(el.value).toBe(null)
     expect(el.setterCalled).toBe(2)
     expect(el.getAttribute('value')).toBe(null)
     const obj = {}
@@ -74,6 +75,35 @@ describe('runtime-dom: props patching', () => {
     expect(el.setterCalled).toBe(3)
   })
 
+  // #14209
+  test('nullish value handling for custom element props', () => {
+    class TestElement extends HTMLElement {
+      myNumber = 1
+      myBool = true
+      myString = 'hello'
+    }
+    window.customElements.define('ce-nullish-test', TestElement)
+    const el = document.createElement('ce-nullish-test') as TestElement
+
+    // setting null on a number prop should preserve null, not coerce to 0
+    patchProp(el, '.myNumber', null, null)
+    expect(el.myNumber).toBe(null)
+    expect(el.getAttribute('myNumber')).toBe(null)
+
+    // setting null on a boolean prop should preserve null, not coerce to false
+    patchProp(el, '.myBool', null, null)
+    expect(el.myBool).toBe(null)
+
+    // setting null on a string prop should preserve null, not coerce to ''
+    patchProp(el, '.myString', null, null)
+    expect(el.myString).toBe(null)
+
+    // setting '' on a boolean prop should preserve '', not coerce to true
+    el.myBool = true
+    patchProp(el, '.myBool', null, '')
+    expect(el.myBool).toBe('')
+  })
+
   // For <input type="text">, setting el.value won't create a `value` attribute
   // so we need to add tests for other elements
   test('value for non-text input', () => {

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

@@ -56,18 +56,25 @@ export function patchDOMProp(
 
   let needRemove = false
   if (value === '' || value == null) {
-    const type = typeof el[key]
-    if (type === 'boolean') {
-      // e.g. <select multiple> compiles to { multiple: '' }
-      value = includeBooleanAttr(value)
-    } else if (value == null && type === 'string') {
-      // e.g. <div :id="null">
-      value = ''
-      needRemove = true
-    } else if (type === 'number') {
-      // e.g. <img :width="null">
-      value = 0
-      needRemove = true
+    if (tag.includes('-')) {
+      // #14209 custom element properties may accept multiple types
+      // so we avoid coercing the value based on the existing property type
+      // and preserve the value as-is
+      needRemove = value == null
+    } else {
+      const type = typeof el[key]
+      if (type === 'boolean') {
+        // e.g. <select multiple> compiles to { multiple: '' }
+        value = includeBooleanAttr(value)
+      } else if (value == null && type === 'string') {
+        // e.g. <div :id="null">
+        value = ''
+        needRemove = true
+      } else if (type === 'number') {
+        // e.g. <img :width="null">
+        value = 0
+        needRemove = true
+      }
     }
   } else {
     if (