1---
2title: Slot Name is Reserved and Not Included in Slot Props
3impact: LOW
4impactDescription: Expecting 'name' in scoped slot props when it's reserved causes confusion
5type: gotcha
6tags: [vue3, slots, scoped-slots, reserved-props, naming]
7---
8 
9# Slot Name is Reserved and Not Included in Slot Props
10 
11**Impact: LOW** - When using scoped slots, the `name` attribute on the `<slot>` element is reserved for identifying the slot. It is not passed as part of the slot props to the parent component.
12 
13## Task Checklist
14 
15- [ ] Don't expect `name` in slot props - it's reserved
16- [ ] Use a different prop name if you need to pass a name value
17- [ ] Remember only explicitly bound attributes become slot props
18 
19**Incorrect Expectation:**
20```vue
21<!-- ChildComponent.vue -->
22<template>
23  <div>
24    <slot name="header" title="Welcome"></slot>
25  </div>
26</template>
27```
28 
29```vue
30<!-- ParentComponent.vue -->
31<ChildComponent>
32  <template #header="props">
33    <!-- props = { title: "Welcome" } -->
34    <!-- 'name' is NOT included! -->
35    {{ props.name }}  <!-- undefined -->
36    {{ props.title }} <!-- "Welcome" -->
37  </template>
38</ChildComponent>
39```
40 
41**If You Need to Pass a "Name" Value:**
42```vue
43<!-- ChildComponent.vue -->
44<template>
45  <div>
46    <!-- Use a different prop name like 'slotName' or 'label' -->
47    <slot name="header" :label="slotLabel" :title="title"></slot>
48  </div>
49</template>
50 
51<script setup>
52const slotLabel = 'header'
53const title = 'Welcome'
54</script>
55```
56 
57```vue
58<!-- ParentComponent.vue -->
59<ChildComponent>
60  <template #header="{ label, title }">
61    <h2>{{ title }}</h2>
62    <span>Section: {{ label }}</span>
63  </template>
64</ChildComponent>
65```
66 
67## What Gets Passed as Slot Props
68 
69| Attribute on `<slot>` | Passed to Parent? |
70|----------------------|-------------------|
71| `name` | No (reserved for slot identification) |
72| `:text="message"` | Yes, as `text` |
73| `:count="5"` | Yes, as `count` |
74| `v-bind="object"` | Yes, spreads object properties |
75| `class="..."` | No (not bound with `:`) |
76 
77## Multiple Named Slots Example
78 
79```vue
80<!-- TabPanel.vue -->
81<template>
82  <div class="tabs">
83    <slot name="tab1" :active="activeTab === 1" :label="'First Tab'"></slot>
84    <slot name="tab2" :active="activeTab === 2" :label="'Second Tab'"></slot>
85  </div>
86</template>
87 
88<script setup>
89import { ref } from 'vue'
90const activeTab = ref(1)
91</script>
92```
93 
94```vue
95<!-- Usage -->
96<TabPanel>
97  <template #tab1="{ active, label }">
98    <!-- 'name' not available, but 'label' is -->
99    <button :class="{ active }">{{ label }}</button>
100  </template>
101 
102  <template #tab2="{ active, label }">
103    <button :class="{ active }">{{ label }}</button>
104  </template>
105</TabPanel>
106```
107 
108## Reference
109- [Vue.js Slots - Scoped Slots](https://vuejs.org/guide/components/slots.html#scoped-slots)
110