diff --git a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts index c4ae077ba34..bc0678b51c9 100644 --- a/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts +++ b/packages/runtime-core/__tests__/helpers/renderSlot.spec.ts @@ -32,6 +32,12 @@ describe('renderSlot', () => { expect(vnode.key).toBe('foo') }) + it('should allow symbol values for slot prop key', () => { + const key = Symbol() + const vnode = renderSlot({ default: () => [h('div')] }, 'default', { key }) + expect(vnode.key).toBe('_default') + }) + it('should render slot fallback', () => { const vnode = renderSlot({}, 'default', { key: 'foo' }, () => ['fallback']) expect(vnode.children).toEqual(['fallback']) diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts index 2cb266ef1c4..92f7dab36b6 100644 --- a/packages/runtime-core/src/helpers/renderSlot.ts +++ b/packages/runtime-core/src/helpers/renderSlot.ts @@ -14,7 +14,7 @@ import { isVNode, openBlock, } from '../vnode' -import { PatchFlags, SlotFlags } from '@vue/shared' +import { PatchFlags, SlotFlags, isSymbol } from '@vue/shared' import { warn } from '../warning' import { isAsyncWrapper } from '../apiAsyncComponent' @@ -72,15 +72,16 @@ export function renderSlot( } openBlock() const validSlotContent = slot && ensureValidVNode(slot(props)) + const slotKey = + props.key || + // slot content array of a dynamic conditional slot may have a branch + // key attached in the `createSlots` helper, respect that + (validSlotContent && (validSlotContent as any).key) const rendered = createBlock( Fragment, { key: - (props.key || - // slot content array of a dynamic conditional slot may have a branch - // key attached in the `createSlots` helper, respect that - (validSlotContent && (validSlotContent as any).key) || - `_${name}`) + + (slotKey && !isSymbol(slotKey) ? slotKey : `_${name}`) + // #7256 force differentiate fallback content from actual content (!validSlotContent && fallback ? '_fb' : ''), },