From c65b805ef1f9b164fb8aaa7bc679a91248b5891a Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 18 May 2022 08:37:24 +0800
Subject: [PATCH] fix(compiler-ssr): only inject fallthrough attrs for root
 transition/keep-alive

---
 .../__tests__/ssrComponent.spec.ts            | 19 +++++++++++++++++++
 .../transforms/ssrInjectFallthroughAttrs.ts   | 14 ++++++++++----
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index d830e716..672af193 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -290,6 +290,25 @@ describe('ssr: components', () => {
         }"
       `)
 
+      // should inject attrs if root with coomments
+      expect(compile(`<!--root--><transition><div/></transition>`).code)
+        .toMatchInlineSnapshot(`
+        "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"vue/server-renderer\\")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
+        }"
+      `)
+
+      // should not inject attrs if not root
+      expect(compile(`<div/><transition><div/></transition>`).code)
+        .toMatchInlineSnapshot(`
+        "
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<!--[--><div></div><div></div><!--]-->\`)
+        }"
+      `)
+
       expect(compile(`<keep-alive><foo/></keep-alive>`).code)
         .toMatchInlineSnapshot(`
         "const { resolveComponent: _resolveComponent } = require(\\"vue\\")
diff --git a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
index b368fd2e..79ab24ec 100644
--- a/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
+++ b/packages/compiler-ssr/src/transforms/ssrInjectFallthroughAttrs.ts
@@ -11,8 +11,11 @@ import {
   isBuiltInType
 } from '@vue/compiler-dom'
 
+const filterChild = (node: ParentNode) =>
+  node.children.filter(n => n.type !== NodeTypes.COMMENT)
+
 const hasSingleChild = (node: ParentNode): boolean =>
-  node.children.filter(n => n.type !== NodeTypes.COMMENT).length === 1
+  filterChild(node).length === 1
 
 export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
   // _attrs is provided as a function argument.
@@ -28,10 +31,13 @@ export const ssrInjectFallthroughAttrs: NodeTransform = (node, context) => {
     (isBuiltInType(node.tag, 'Transition') ||
       isBuiltInType(node.tag, 'KeepAlive'))
   ) {
-    if (hasSingleChild(node)) {
-      injectFallthroughAttrs(node.children[0])
+    const rootChildren = filterChild(context.root)
+    if (rootChildren.length === 1 && rootChildren[0] === node) {
+      if (hasSingleChild(node)) {
+        injectFallthroughAttrs(node.children[0])
+      }
+      return
     }
-    return
   }
 
   const parent = context.parent