fix(runtime-core): skip patching reserved props for custom elements (#14275)

close #14274

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

@@ -1597,6 +1597,24 @@ describe('SSR hydration', () => {
     expect((container.firstChild as any).foo).toBe(msg.value)
   })
 
+  // #14274
+  test('should not render ref on custom element during hydration', () => {
+    const container = document.createElement('div')
+    container.innerHTML = '<my-element>hello</my-element>'
+    const root = ref()
+    const app = createSSRApp({
+      render: () =>
+        h('my-element', {
+          ref: root,
+          innerHTML: 'hello',
+        }),
+    })
+    app.mount(container)
+    expect(container.innerHTML).toBe('<my-element>hello</my-element>')
+    expect((container.firstChild as Element).hasAttribute('ref')).toBe(false)
+    expect(root.value).toBe(container.firstChild)
+  })
+
   // #5728
   test('empty text node in slot', () => {
     const Comp = {

packages/runtime-core/src/hydration.ts

@@ -507,7 +507,7 @@ export function createHydrationFunctions(
               (isOn(key) && !isReservedProp(key)) ||
               // force hydrate v-bind with .prop modifiers
               key[0] === '.' ||
-              isCustomElement
+              (isCustomElement && !isReservedProp(key))
             ) {
               patchProp(el, key, null, props[key], undefined, parentComponent)
             }