feat(runtime-core): support hydration of all custom element properties

packages/runtime-core/__tests__/hydration.spec.ts

@@ -991,6 +991,30 @@ describe('SSR hydration', () => {
     expect((container.firstChild!.firstChild as any)._value).toBe(true)
   })
 
+  // #7203
+  test('hydrate custom element with vue bindings', () => {
+    class MyElement extends HTMLElement {
+      foo = ''
+      constructor() {
+        super()
+      }
+    }
+    customElements.define('my-element-7203', MyElement)
+
+    const msg = ref('bar')
+    const container = document.createElement('div')
+    container.innerHTML = '<my-element-7203 :foo="msg"></my-element>'
+    const app = createSSRApp({
+      render: () => h('my-element-7203', { foo: msg.value })
+    })
+    // isCustomElement MUST be set at runtime
+    app.config.compilerOptions.isCustomElement = tag => tag.startsWith('my-')
+    const vnode = app.mount(container).$.subTree as VNode<Node, Element> & {
+      el: Element
+    }
+    expect((vnode.el as any).foo).toBe(msg.value)
+  })
+
   // #5728
   test('empty text node in slot', () => {
     const Comp = {

packages/runtime-core/src/hydration.ts

@@ -336,8 +336,12 @@ export function createHydrationFunctions(
     const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode
     // #4006 for form elements with non-string v-model value bindings
     // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
-    // #7476 <input indeterminate>
     const forcePatch = type === 'input' || type === 'option'
+    // #7203 elements registered as custom elements should have all properties bound
+    const isCustomElement =
+      parentComponent?.appContext.config.compilerOptions.isCustomElement?.(
+        el.localName
+      )
     // skip props & children if this is hoisted static nodes
     // #5405 in dev, always hydrate children for HMR
     if (__DEV__ || forcePatch || patchFlag !== PatchFlags.HOISTED) {
@@ -379,7 +383,9 @@ export function createHydrationFunctions(
                 (key.endsWith('value') || key === 'indeterminate')) ||
               (isOn(key) && !isReservedProp(key)) ||
               // force hydrate v-bind with .prop modifiers
-              key[0] === '.'
+              key[0] === '.' ||
+              // hydrate if declared custom element
+              isCustomElement
             ) {
               patchProp(
                 el,