1---
2title: Scoped CSS Cannot Style Slot Content Directly
3impact: HIGH
4impactDescription: Slot content receives the parent component's scope, not the child's, causing styles to fail unexpectedly
5type: gotcha
6tags: [vue3, sfc, scoped-css, slots, deep-selector]
7---
8 
9# Scoped CSS Cannot Style Slot Content Directly
10 
11**Impact: HIGH** - When a parent passes content through a slot, that content receives the parent component's scoped style attributes, not the child component's. This means the child component cannot style slot content with regular scoped CSS.
12 
13## Task Checklist
14 
15- [ ] Use `:deep()` selector in the wrapper component to style slot content
16- [ ] Alternatively, use `:slotted()` pseudo-selector to target slotted elements
17- [ ] For complex slot styling, consider using CSS modules or unscoped styles
18- [ ] Document expected slot content structure when styling assumptions exist
19 
20**Problematic Code:**
21```vue
22<!-- Card.vue (child component) -->
23<template>
24  <div class="card">
25    <div class="card-body">
26      <slot />
27    </div>
28  </div>
29</template>
30 
31<style scoped>
32.card-body {
33  padding: 1rem;
34}
35 
36/* BAD: Won't apply to slot content! */
37.card-body h2 {
38  color: #333;
39  margin-bottom: 0.5rem;
40}
41 
42.card-body p {
43  color: #666;
44}
45</style>
46```
47 
48```vue
49<!-- Parent.vue -->
50<template>
51  <Card>
52    <!-- This h2 and p won't be styled by Card's scoped CSS -->
53    <h2>Card Title</h2>
54    <p>Card description text.</p>
55  </Card>
56</template>
57```
58 
59**Correct Code:**
60```vue
61<!-- Card.vue - Using :slotted() -->
62<template>
63  <div class="card">
64    <div class="card-body">
65      <slot />
66    </div>
67  </div>
68</template>
69 
70<style scoped>
71.card-body {
72  padding: 1rem;
73}
74 
75/* GOOD: :slotted() targets slot content */
76:slotted(h2) {
77  color: #333;
78  margin-bottom: 0.5rem;
79}
80 
81:slotted(p) {
82  color: #666;
83}
84</style>
85```
86 
87## Using :deep() Alternative
88 
89```vue
90<!-- Card.vue - Using :deep() -->
91<style scoped>
92.card-body {
93  padding: 1rem;
94}
95 
96/* :deep() also works for slot content */
97.card-body :deep(h2) {
98  color: #333;
99}
100 
101.card-body :deep(p) {
102  color: #666;
103}
104</style>
105```
106 
107## Why This Happens
108 
109Slot content is compiled in the parent component's scope:
110 
111```vue
112<!-- Parent template compiles to: -->
113<Card>
114  <h2 data-v-parent123>Card Title</h2>
115  <p data-v-parent123>Card description</p>
116</Card>
117 
118<!-- Card template compiles to: -->
119<div class="card" data-v-card456>
120  <div class="card-body" data-v-card456>
121    <slot />  <!-- Content inserted WITHOUT data-v-card456 -->
122  </div>
123</div>
124```
125 
126The `<h2>` has `data-v-parent123`, but Card's scoped CSS expects `data-v-card456`.
127 
128## :slotted() vs :deep() for Slots
129 
130Both work, but have subtle differences:
131 
132```vue
133<style scoped>
134/* :slotted() - Specifically for slot content */
135/* Only targets direct slotted elements */
136:slotted(h2) {
137  color: blue;
138}
139 
140/* :deep() - More general deep selector */
141/* Can target nested elements within slot content */
142.card-body :deep(h2) {
143  color: blue;
144}
145 
146/* For nested elements in slot content, must use :deep() */
147:slotted(.wrapper h2) { }  /* Won't work for nested h2 */
148.card-body :deep(.wrapper h2) { }  /* Works for nested */
149</style>
150```
151 
152## Combining with Named Slots
153 
154```vue
155<template>
156  <div class="card">
157    <header class="card-header">
158      <slot name="header" />
159    </header>
160    <div class="card-body">
161      <slot />
162    </div>
163    <footer class="card-footer">
164      <slot name="footer" />
165    </footer>
166  </div>
167</template>
168 
169<style scoped>
170/* Style specific slot content */
171.card-header :slotted(h1),
172.card-header :slotted(h2) {
173  margin: 0;
174  font-size: 1.25rem;
175}
176 
177.card-body :slotted(p) {
178  margin-bottom: 1rem;
179}
180 
181.card-footer :slotted(button) {
182  margin-right: 0.5rem;
183}
184</style>
185```
186 
187## Performance Tip: Use Classes
188 
189Element selectors with `:slotted()` can be slower:
190 
191```vue
192<style scoped>
193/* SLOWER: Element selector */
194:slotted(p) {
195  color: gray;
196}
197 
198/* FASTER: Class selector */
199:slotted(.card-text) {
200  color: gray;
201}
202</style>
203```
204 
205## When to Use Unscoped Styles
206 
207For complex slot styling, unscoped styles may be cleaner:
208 
209```vue
210<template>
211  <article class="article-card">
212    <slot />
213  </article>
214</template>
215 
216<style>
217/* Unscoped with unique prefix for complex content styling */
218.article-card h1,
219.article-card h2,
220.article-card h3 {
221  font-family: Georgia, serif;
222  line-height: 1.2;
223}
224 
225.article-card p {
226  line-height: 1.6;
227}
228 
229.article-card img {
230  max-width: 100%;
231}
232 
233.article-card blockquote {
234  border-left: 3px solid #ccc;
235  padding-left: 1rem;
236}
237</style>
238```
239 
240## Reference
241- [Vue.js Scoped CSS - Slotted Selectors](https://vuejs.org/api/sfc-css-features.html#slotted-selectors)
242- [Vue.js Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors)
243