fix(compiler-ssr): resolve tag name from _attrs in transition group

packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts

@@ -11,11 +11,18 @@ describe('transition-group', () => {
       "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _tag = (_attrs && typeof _attrs.tag === 'string') ? _attrs.tag : ''
+        if (_tag) {
+          _push(\`<\${_tag}>\`)
+        }
         _push(\`<!--[-->\`)
         _ssrRenderList(_ctx.list, (i) => {
           _push(\`<div></div>\`)
         })
         _push(\`<!--]-->\`)
+        if (_tag) {
+          _push(\`</\${_tag}>\`)
+        }
       }"
     `)
   })
@@ -114,6 +121,10 @@ describe('transition-group', () => {
       "const { ssrRenderList: _ssrRenderList } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
+        const _tag = (_attrs && typeof _attrs.tag === 'string') ? _attrs.tag : ''
+        if (_tag) {
+          _push(\`<\${_tag}>\`)
+        }
         _push(\`<!--[-->\`)
         _ssrRenderList(10, (i) => {
           _push(\`<div></div>\`)
@@ -125,6 +136,9 @@ describe('transition-group', () => {
           _push(\`<div>ok</div>\`)
         }
         _push(\`<!--]-->\`)
+        if (_tag) {
+          _push(\`</\${_tag}>\`)
+        }
       }"
     `)
   })

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -4,6 +4,7 @@ import {
   type CompilerError,
   type CompilerOptions,
   ElementTypes,
+  type ExpressionNode,
   type IfStatement,
   type JSChildNode,
   NodeTypes,
@@ -84,7 +85,7 @@ export interface SSRTransformContext {
   onError: (error: CompilerError) => void
   helper<T extends symbol>(name: T): T
   pushStringPart(part: TemplateLiteral['elements'][0]): void
-  pushStatement(statement: IfStatement | CallExpression): void
+  pushStatement(statement: IfStatement | CallExpression | ExpressionNode): void
 }
 
 function createSSRTransformContext(

packages/compiler-ssr/src/transforms/ssrTransformTransitionGroup.ts

@@ -6,7 +6,10 @@ import {
   NodeTypes,
   type TransformContext,
   buildProps,
+  createBlockStatement,
   createCallExpression,
+  createIfStatement,
+  createSimpleExpression,
   findProp,
 } from '@vue/compiler-dom'
 import { SSR_RENDER_ATTRS } from '../runtimeHelpers'
@@ -112,7 +115,38 @@ export function ssrProcessTransitionGroup(
       context.pushStringPart(`</${tag.value!.content}>`)
     }
   } else {
+    // _attrs may contain tag property
+    const hasFallthroughAttrs = node.props.some(
+      p =>
+        p.type === NodeTypes.DIRECTIVE &&
+        p.name === 'bind' &&
+        p.exp &&
+        p.exp.type === NodeTypes.SIMPLE_EXPRESSION &&
+        p.exp.content === '_attrs',
+    )
+    if (hasFallthroughAttrs) {
+      context.pushStatement(
+        createSimpleExpression(
+          `const _tag = (_attrs && typeof _attrs.tag === 'string') ? _attrs.tag : ''`,
+        ),
+      )
+      context.pushStatement(
+        createIfStatement(
+          createSimpleExpression('_tag'),
+          createBlockStatement([createSimpleExpression('_push(`<${_tag}>`)')]),
+        ),
+      )
+    }
     // fragment
     processChildren(node, context, true, true, true)
+
+    if (hasFallthroughAttrs) {
+      context.pushStatement(
+        createIfStatement(
+          createSimpleExpression('_tag'),
+          createBlockStatement([createSimpleExpression('_push(`</${_tag}>`)')]),
+        ),
+      )
+    }
   }
 }

packages/server-renderer/__tests__/ssrAttrFallthrough.spec.ts

@@ -75,4 +75,20 @@ describe('ssr: attr fallthrough', () => {
       `<div id="foo" class="bar baz"></div>`,
     )
   })
+
+  // #12827
+  test('with transition-group tag name', async () => {
+    expect(
+      await renderToString(
+        createApp({
+          components: {
+            one: {
+              template: `<TransitionGroup><slot/></TransitionGroup>`,
+            },
+          },
+          template: `<one tag="div"><p v-for="i in 2">{{i}}</p></one>`,
+        }),
+      ),
+    ).toBe(`<div><!--[--><p>1</p><p>2</p><!--]--></div>`)
+  })
 })