fix(hydration): handle camel-case tag name when performing match assertion (#3247)

fix #3243

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

@@ -626,6 +626,15 @@ describe('SSR hydration', () => {
     expect(spy).toHaveBeenCalled()
   })
 
+  test('elements with camel-case in svg ', () => {
+    const { vnode, container } = mountWithHydration(
+      '<animateTransform></animateTransform>',
+      () => h('animateTransform')
+    )
+    expect(vnode.el).toBe(container.firstChild)
+    expect(`Hydration node mismatch`).not.toHaveBeenWarned()
+  })
+
   test('SVG as a mount container', () => {
     const svgContainer = document.createElement('svg')
     svgContainer.innerHTML = '<g></g>'

packages/runtime-core/src/hydration.ts

@@ -158,7 +158,8 @@ export function createHydrationFunctions(
         if (shapeFlag & ShapeFlags.ELEMENT) {
           if (
             domType !== DOMNodeTypes.ELEMENT ||
-            vnode.type !== (node as Element).tagName.toLowerCase()
+            (vnode.type as string).toLowerCase() !==
+              (node as Element).tagName.toLowerCase()
           ) {
             nextNode = onMismatch()
           } else {