1---
2title: Avoid Scoped Styles in Reusable Transition Components
3impact: MEDIUM
4impactDescription: Scoped styles in transition wrapper components won't apply to slotted content, breaking the transition animation
5type: gotcha
6tags: [vue3, transition, scoped-css, slot, reusable-component]
7---
8 
9# Avoid Scoped Styles in Reusable Transition Components
10 
11**Impact: MEDIUM** - When creating reusable transition wrapper components, using `<style scoped>` will prevent the transition CSS classes from applying to slotted content. Scoped styles only affect elements directly in the component's template, not content passed through slots. Your transition animations will silently fail.
12 
13## Task Checklist
14 
15- [ ] In reusable transition components, use `<style>` without `scoped`
16- [ ] Alternatively, use unique class name prefixes to avoid global conflicts
17- [ ] Or use CSS modules with `:global()` for transition classes
18- [ ] Test that transitions work when component is used in different contexts
19 
20**Problematic Code:**
21```vue
22<!-- MyFadeTransition.vue -->
23<template>
24  <Transition name="my-fade">
25    <slot />
26  </Transition>
27</template>
28 
29<!-- BAD: Scoped styles won't apply to slot content! -->
30<style scoped>
31.my-fade-enter-active,
32.my-fade-leave-active {
33  transition: opacity 0.3s ease;
34}
35 
36.my-fade-enter-from,
37.my-fade-leave-to {
38  opacity: 0;
39}
40</style>
41```
42 
43```vue
44<!-- Parent component using the transition -->
45<template>
46  <MyFadeTransition>
47    <div v-if="show">This won't animate!</div>
48  </MyFadeTransition>
49</template>
50 
51<!--
52The <div> is slotted content, so .my-fade-* classes
53applied by Vue won't match the scoped CSS selectors
54-->
55```
56 
57**Correct Code:**
58```vue
59<!-- MyFadeTransition.vue -->
60<template>
61  <Transition name="my-fade">
62    <slot />
63  </Transition>
64</template>
65 
66<!-- GOOD: Unscoped styles apply to any element -->
67<style>
68.my-fade-enter-active,
69.my-fade-leave-active {
70  transition: opacity 0.3s ease;
71}
72 
73.my-fade-enter-from,
74.my-fade-leave-to {
75  opacity: 0;
76}
77</style>
78```
79 
80## Alternative: Use Unique Prefixed Class Names
81 
82To avoid global style conflicts, use distinctive prefixes:
83 
84```vue
85<!-- FadeTransition.vue -->
86<template>
87  <Transition name="v-fade-transition">
88    <slot />
89  </Transition>
90</template>
91 
92<style>
93/* Unique prefix reduces collision risk */
94.v-fade-transition-enter-active,
95.v-fade-transition-leave-active {
96  transition: opacity 0.3s ease;
97}
98 
99.v-fade-transition-enter-from,
100.v-fade-transition-leave-to {
101  opacity: 0;
102}
103</style>
104```
105 
106## Alternative: CSS Modules with :global()
107 
108```vue
109<!-- FadeTransition.vue -->
110<template>
111  <Transition name="fade">
112    <slot />
113  </Transition>
114</template>
115 
116<style module>
117/* Use :global() for transition classes */
118:global(.fade-enter-active),
119:global(.fade-leave-active) {
120  transition: opacity 0.3s ease;
121}
122 
123:global(.fade-enter-from),
124:global(.fade-leave-to) {
125  opacity: 0;
126}
127</style>
128```
129 
130## Alternative: Custom Transition Classes
131 
132Use the custom class props to apply scoped classes:
133 
134```vue
135<!-- FadeTransition.vue -->
136<template>
137  <Transition
138    :enter-active-class="$style.enterActive"
139    :leave-active-class="$style.leaveActive"
140    :enter-from-class="$style.enterFrom"
141    :leave-to-class="$style.leaveTo"
142  >
143    <slot />
144  </Transition>
145</template>
146 
147<style module>
148.enterActive,
149.leaveActive {
150  transition: opacity 0.3s ease;
151}
152 
153.enterFrom,
154.leaveTo {
155  opacity: 0;
156}
157</style>
158```
159 
160## Complete Reusable Transition Component Example
161 
162```vue
163<!-- transitions/SlideTransition.vue -->
164<template>
165  <Transition
166    name="slide"
167    :mode="mode"
168    :appear="appear"
169    @before-enter="$emit('before-enter', $event)"
170    @enter="$emit('enter', $event)"
171    @after-enter="$emit('after-enter', $event)"
172    @before-leave="$emit('before-leave', $event)"
173    @leave="$emit('leave', $event)"
174    @after-leave="$emit('after-leave', $event)"
175  >
176    <slot />
177  </Transition>
178</template>
179 
180<script setup>
181defineProps({
182  mode: {
183    type: String,
184    default: 'out-in',
185    validator: (v) => ['out-in', 'in-out', ''].includes(v)
186  },
187  appear: {
188    type: Boolean,
189    default: false
190  }
191})
192 
193defineEmits([
194  'before-enter', 'enter', 'after-enter',
195  'before-leave', 'leave', 'after-leave'
196])
197</script>
198 
199<!-- Unscoped so styles apply to slotted content -->
200<style>
201.slide-enter-active,
202.slide-leave-active {
203  transition: transform 0.3s ease, opacity 0.3s ease;
204}
205 
206.slide-enter-from {
207  opacity: 0;
208  transform: translateX(-20px);
209}
210 
211.slide-leave-to {
212  opacity: 0;
213  transform: translateX(20px);
214}
215</style>
216```
217 
218Usage:
219```vue
220<template>
221  <SlideTransition>
222    <div v-if="show" class="content">
223      This will properly animate!
224    </div>
225  </SlideTransition>
226</template>
227```
228 
229## Why This Happens
230 
231Vue's scoped styles work by adding a unique data attribute (e.g., `data-v-7ba5bd90`) to elements and selectors:
232 
233```css
234/* What you write */
235.my-fade-enter-active { ... }
236 
237/* What Vue generates (scoped) */
238.my-fade-enter-active[data-v-7ba5bd90] { ... }
239```
240 
241Slotted content comes from the parent component and gets the parent's data attribute, not the transition component's attribute. So the selectors never match.
242 
243## Reference
244- [Vue.js Reusable Transitions](https://vuejs.org/guide/built-ins/transition.html#reusable-transitions)
245- [Vue.js Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)
246