1# Multi-Root Component Class Attribute Inheritance
2 
3## Rule
4 
5When a Vue 3 component has multiple root elements, class and style bindings from the parent will NOT automatically fall through. You must explicitly bind `$attrs.class` or `$attrs.style` to the target element.
6 
7## Why This Matters
8 
9- Vue 3 components can have multiple root elements (fragments)
10- Unlike single-root components, multi-root components have no automatic attribute fallthrough
11- Without explicit handling, classes and styles passed from parent are silently ignored
12- Vue will emit a runtime warning, but styles/classes simply won't apply
13 
14## Bad Code
15 
16```vue
17<!-- ChildComponent.vue - WRONG: classes from parent won't apply -->
18<template>
19  <header>Header</header>
20  <main>Content</main>
21  <footer>Footer</footer>
22</template>
23 
24<!-- Parent usage -->
25<ChildComponent class="my-custom-class" />
26<!-- Result: my-custom-class is NOT applied to any element -->
27```
28 
29## Good Code
30 
31```vue
32<!-- ChildComponent.vue - CORRECT: explicitly bind $attrs.class -->
33<template>
34  <header>Header</header>
35  <main :class="$attrs.class" :style="$attrs.style">Content</main>
36  <footer>Footer</footer>
37</template>
38 
39<!-- Or bind all attrs to one element -->
40<template>
41  <header>Header</header>
42  <main v-bind="$attrs">Content</main>
43  <footer>Footer</footer>
44</template>
45```
46 
47## Accessing $attrs in script setup
48 
49```vue
50<script setup>
51import { useAttrs } from 'vue'
52const attrs = useAttrs()
53// attrs.class and attrs.style are available
54</script>
55 
56<template>
57  <header>Header</header>
58  <main :class="attrs.class">Content</main>
59  <footer>Footer</footer>
60</template>
61```
62 
63## Disabling Automatic Inheritance
64 
65For single-root components where you want to control attribute placement:
66 
67```vue
68<script>
69export default {
70  inheritAttrs: false
71}
72</script>
73 
74<script setup>
75import { useAttrs } from 'vue'
76const attrs = useAttrs()
77</script>
78 
79<template>
80  <div class="wrapper">
81    <input v-bind="attrs" />
82  </div>
83</template>
84```
85 
86## Vue 2 to Vue 3 Migration Note
87 
88In Vue 2, `$attrs` did NOT include `class` and `style`. In Vue 3, `$attrs` contains ALL attributes including `class` and `style`. This is a breaking change that affects how you handle attribute forwarding.
89 
90## References
91 
92- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html)
93- [Vue 3 Migration Guide - $attrs includes class & style](https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style)
94