Fallthrough Attributes

Telemetry signals that are not defined as props automatically "pass through" to the component's root element - like data from sensors to the NOVA LAB central processor. This mechanism is called fallthrough attributes and is an important aspect of creating flexible components.

Automatic Inheritance

Attributes passed to a component that are NOT declared as props or emits automatically end up on the root element of the template:

1<!-- Parent -->
2<CustomInput class="special" data-testid="email" />
3
4<!-- CustomInput.vue (root = input) -->
5<template>
6  <input type="text" />
7</template>
8
9<!-- Result in DOM -->
10<input type="text" class="special" data-testid="email" />

This applies to: class, style, id, data-*, event listeners, and other HTML attributes. This behavior is very useful - it allows the component user to add CSS classes, inline styles, or accessibility attributes without needing to define them as props.

Merging classes and styles

If the root element of the component already has its own class or style, Vue automatically merges them with attributes from the parent:

1<!-- Parent -->
2<StatusPanel class="highlighted" style="margin-top: 10px" />
3
4<!-- StatusPanel.vue -->
5<template>
6  <div class="panel" style="padding: 1rem">...</div>
7</template>
8
9<!-- Result in DOM - classes and styles merged -->
10<div class="panel highlighted" style="padding: 1rem; margin-top: 10px">...</div>

Event listener inheritance

Event listeners also pass through. If the parent passes @click, it will be added to the root element:

1<!-- Parent -->
2<MarsButton @click="handleClick" />
3
4<!-- MarsButton.vue -->
5<template>
6  <button @click="logInternal">Click</button>
7</template>

In this case, clicking the button will trigger both handlers - first logInternal from the component, then handleClick from the parent.

Disabling Inheritance

When you want to control exactly where attributes go (e.g., assign them to an inner element instead of root), use inheritAttrs: false:

1<script setup>
2defineOptions({ inheritAttrs: false })
3</script>
4
5<template>
6  <div class="wrapper">
7    <!-- Manual assignment to a specific element -->
8    <input v-bind="$attrs" type="text" />
9  </div>
10</template>

This is a common pattern in form components - the wrapper <div> serves for styling, while $attrs go directly to the <input>, where they're most useful (e.g., placeholder, disabled, aria-label).

useAttrs()

Access attributes in <script setup> via the useAttrs() composable:

1<script setup>
2import { useAttrs } from 'vue'
3
4const attrs = useAttrs()
5
6console.log(attrs.class)          // "special"
7console.log(attrs['data-testid']) // "email"
8console.log(attrs.style)         // style object
9</script>

Note: useAttrs() is NOT reactive - if you need to react to attribute changes, use $attrs directly in the template or the onUpdated hook.

Multi-root Components

When a component has multiple root elements (fragments), Vue doesn't know which one to assign fallthrough attributes to. You must explicitly assign $attrs to the chosen element:

1<script setup>
2defineOptions({ inheritAttrs: false })
3</script>
4
5<template>
6  <header>Header</header>
7  <main v-bind="$attrs">Content</main>
8  <footer>Footer</footer>
9</template>

Without inheritAttrs: false and explicit v-bind="$attrs", Vue will display a warning in the console. This requires a conscious decision - which element should "inherit" attributes from the parent.

Practical example - NOVA LAB panel component

Let's combine all concepts in one example:

1<script setup>
2import { useAttrs } from 'vue'
3
4defineOptions({ inheritAttrs: false })
5
6defineProps({ title: String })
7
8const attrs = useAttrs()
9const hasCustomClass = !!attrs.class
10</script>
11
12<template>
13  <section class="nova-panel">
14    <h3>{{ title }}</h3>
15    <div v-bind="$attrs" class="panel-content">
16      <slot />
17    </div>
18    <small v-if="hasCustomClass">Custom styling applied</small>
19  </section>
20</template>

Thanks to this pattern, the parent can pass class, style, id, and other attributes that go directly to panel-content, not to the outer <section>.

1<script setup>
2import CustomInput from './CustomInput.vue'
3import MultiRoot from './MultiRoot.vue'
4</script>
5
6<template>
7  <div class="nova-lab">
8    <h1>Fallthrough Attributes</h1>
9
10    <h2>Automatic inheritance:</h2>
11    <CustomInput
12      class="special-input"
13      data-testid="mars-input"
14      placeholder="Type here..."
15    />
16
17    <h2>inheritAttrs: false + manual binding:</h2>
18    <MultiRoot
19      class="highlighted"
20      id="main-section"
21      data-role="content"
22    />
23  </div>
24</template>
25
26<style scoped>
27.nova-lab {
28  background: #0a0e27;
29  color: #00ff88;
30  min-height: 100vh;
31  padding: 20px;
32  font-family: monospace;
33}
34h1 { color: #00ff88; margin-bottom: 20px; }
35h2 { color: #00b4d8; margin: 15px 0 10px; }
36.special-input { border-color: #ff9900 !important; }
37.highlighted { background: rgba(0, 255, 136, 0.15) !important; }
38</style>