diff --git a/packages/runtime-core/__tests__/scopeId.spec.ts b/packages/runtime-core/__tests__/scopeId.spec.ts index d9a7d4dbf..7935fddc6 100644 --- a/packages/runtime-core/__tests__/scopeId.spec.ts +++ b/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( + `
I have a TransitionGroup
`, + ) + }) + // #1988 test('should inherit scopeId through nested HOCs with inheritAttrs: false', () => { const App = { diff --git a/packages/runtime-dom/src/components/TransitionGroup.ts b/packages/runtime-dom/src/components/TransitionGroup.ts index 7bb5ce0c6..9c308cf10 100644 --- a/packages/runtime-dom/src/components/TransitionGroup.ts +++ b/packages/runtime-dom/src/components/TransitionGroup.ts @@ -167,7 +167,9 @@ const TransitionGroupImpl: ComponentOptions = /*@__PURE__*/ decorate({ } } - return createVNode(tag, null, children) + const node = createVNode(tag, null, children) + node.slotScopeIds = instance.vnode.slotScopeIds + return node } }, })