fix(runtime-dom): transitionGroup can render :slotted styles

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

@@ -19,6 +19,7 @@ import {
 } from '@vue/runtime-test'
 import { withCtx } from '../src/componentRenderContext'
 import { PatchFlags } from '@vue/shared'
+import { TransitionGroup } from '@vue/runtime-dom'
 
 describe('scopeId runtime support', () => {
   test('should attach scopeId', () => {
@@ -214,6 +215,41 @@ describe('scopeId runtime support', () => {
     )
   })
 
+  test(':slotted should work on transitionGroup', async () => {
+    const Child = {
+      __scopeId: 'child',
+      render(this: any) {
+        return h('div', renderSlot(this.$slots, 'default'))
+      },
+    }
+
+    const App = {
+      __scopeId: 'parent',
+      render: () => {
+        return h(
+          Child,
+          withCtx(() => {
+            return [
+              h(TransitionGroup, null, {
+                default: withCtx(() => [
+                  h('div', { key: 'foo' }, ' I have a TransitionGroup '),
+                ]),
+              }),
+            ]
+          }),
+        )
+      },
+    }
+    const root = nodeOps.createElement('div')
+    render(h(App), root)
+    // slot content should have:
+    // - scopeId from parent
+    // - slotted scopeId (with `-s` postfix) from child (the tree owner)
+    expect(serializeInner(root)).toBe(
+      `<div child parent><div parent child-s> I have a TransitionGroup </div></div>`,
+    )
+  })
+
   // #1988
   test('should inherit scopeId through nested HOCs with inheritAttrs: false', () => {
     const App = {

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -149,7 +149,9 @@ const TransitionGroupImpl: ComponentOptions = {
         }
       }
 
-      return createVNode(tag, null, children)
+      const node = createVNode(tag, null, children)
+      node.slotScopeIds = instance.vnode.slotScopeIds
+      return node
     }
   },
 }