fix(runtime-core): allow symbol values for slot prop key (#12069)

close #12068

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'])

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 ||
+        (slotKey && !isSymbol(slotKey) ? slotKey : `_${name}`) +
-          // 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}`) +
         // #7256 force differentiate fallback content from actual content
         (!validSlotContent && fallback ? '_fb' : ''),
     },