fix(runtime-core): #7203 - adds support for custom element hydration

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

@@ -935,6 +935,22 @@ describe('SSR hydration', () => {
     expect((container.firstChild!.firstChild as any)._value).toBe(true)
   })
 
+  test('hydrate custom element with vue bindings', () => {
+    class MyElement extends HTMLElement {
+      foo = ''
+      constructor() {
+        super()
+      }
+    }
+    customElements.define('my-element', MyElement)
+    const msg = ref('bar')
+    const { container } = mountWithHydration(
+      '<my-element :foo="msg"></my-element>',
+      () => h('my-element', { foo: msg.value })
+    )
+    expect((container.firstChild as any).foo).toBe(msg.value)
+  })
+
   // #5728
   test('empty text node in slot', () => {
     const Comp = {

packages/runtime-core/src/hydration.ts

@@ -327,7 +327,8 @@ export function createHydrationFunctions(
           for (const key in props) {
             if (
               (forcePatchValue && key.endsWith('value')) ||
-              (isOn(key) && !isReservedProp(key))
+              (isOn(key) && !isReservedProp(key)) ||
+              customElements.get(el.localName) // If the element is a custom element, apply vue props during hydration - See #7203
             ) {
               patchProp(
                 el,