1---
2title: Scoped Styles May Not Apply to Teleported Content
3impact: MEDIUM
4impactDescription: Scoped styles can fail to apply to teleported elements due to data attribute limitations
5type: gotcha
6tags: [vue3, teleport, scoped-styles, css]
7---
8 
9# Scoped Styles May Not Apply to Teleported Content
10 
11**Impact: MEDIUM** - When using scoped styles with Teleport, the styles may not apply correctly to teleported elements. This is a known limitation related to how Vue's scoped style attributes work with elements rendered outside the component's DOM tree.
12 
13## Task Checklist
14 
15- [ ] Test scoped styles on teleported content
16- [ ] Use `:deep()` selector or non-scoped styles for teleported content
17- [ ] Consider CSS modules as an alternative
18- [ ] Keep teleported content styles in a separate non-scoped style block
19 
20**Problem - Scoped Styles Not Applied:**
21```vue
22<template>
23  <Teleport to="body">
24    <div class="modal">
25      <p class="modal-text">This text may not be styled!</p>
26    </div>
27  </Teleport>
28</template>
29 
30<style scoped>
31/* These styles may NOT apply to teleported content */
32.modal {
33  background: white;
34  padding: 20px;
35}
36 
37.modal-text {
38  color: blue;  /* May not work */
39}
40</style>
41```
42 
43**Solution 1 - Use Non-Scoped Styles for Teleported Content:**
44```vue
45<template>
46  <Teleport to="body">
47    <div class="my-modal">
48      <p class="my-modal-text">This text will be styled</p>
49    </div>
50  </Teleport>
51</template>
52 
53<style scoped>
54/* Component-specific styles */
55.button { color: blue; }
56</style>
57 
58<style>
59/* Non-scoped styles for teleported content */
60/* Use specific class names to avoid conflicts */
61.my-modal {
62  background: white;
63  padding: 20px;
64  position: fixed;
65  top: 50%;
66  left: 50%;
67  transform: translate(-50%, -50%);
68}
69 
70.my-modal-text {
71  color: blue;
72}
73</style>
74```
75 
76**Solution 2 - Use :deep() Selector:**
77```vue
78<template>
79  <Teleport to="body">
80    <div class="modal">
81      <p class="modal-text">Styled with :deep()</p>
82    </div>
83  </Teleport>
84</template>
85 
86<style scoped>
87:deep(.modal) {
88  background: white;
89  padding: 20px;
90}
91 
92:deep(.modal-text) {
93  color: blue;
94}
95</style>
96```
97 
98**Solution 3 - CSS Modules:**
99```vue
100<template>
101  <Teleport to="body">
102    <div :class="$style.modal">
103      <p :class="$style.modalText">Styled with CSS modules</p>
104    </div>
105  </Teleport>
106</template>
107 
108<style module>
109.modal {
110  background: white;
111  padding: 20px;
112}
113 
114.modalText {
115  color: blue;
116}
117</style>
118```
119 
120## Multi-Root Components with Teleport
121 
122Using Teleport as one of multiple root nodes causes additional issues:
123 
124```vue
125<template>
126  <!-- Multi-root component -->
127  <button @click="open = true">Open</button>
128  <Teleport to="body">
129    <div class="modal">Content</div>
130  </Teleport>
131</template>
132 
133<!-- Warning: class/style attributes may not be inherited -->
134```
135 
136Pass classes explicitly to avoid inheritance issues:
137 
138```vue
139<template>
140  <button @click="open = true">Open</button>
141  <Teleport to="body">
142    <div :class="['modal', $attrs.class]" :style="$attrs.style">
143      Content
144    </div>
145  </Teleport>
146</template>
147```
148 
149## Best Practice: Dedicated Modal Styles
150 
151Create a dedicated stylesheet for modal/overlay components:
152 
153```css
154/* modal-styles.css */
155.modal-overlay {
156  position: fixed;
157  inset: 0;
158  background: rgba(0, 0, 0, 0.5);
159  display: flex;
160  align-items: center;
161  justify-content: center;
162}
163 
164.modal-content {
165  background: white;
166  border-radius: 8px;
167  padding: 24px;
168  max-width: 500px;
169  width: 90%;
170}
171```
172 
173```vue
174<script setup>
175import './modal-styles.css'
176</script>
177 
178<template>
179  <Teleport to="body">
180    <div v-if="open" class="modal-overlay">
181      <div class="modal-content">
182        <slot />
183      </div>
184    </div>
185  </Teleport>
186</template>
187```
188 
189## Reference
190- [Vue.js SFC CSS Features - Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)
191- [GitHub Issue #2047 - Scoped styles and teleport](https://github.com/vuejs/core/issues/2047)
192