codejump

AcademyVue

Fallthrough Attributes

An attribute a parent passes but the child never declares as a prop lands on the root element automatically — unless there is more than one root.

2 min readUpdated

3 exercises

Waiting at the end of this page.

Undeclared attributes fall through to the root element, for free

vue
<!-- MyButton.vue — declares no "id" or "class" prop -->
<template>
  <button>Click me</button>
</template>

<!-- usage -->
<MyButton id="save-btn" class="primary" />

id and class were never declared as props, so Vue treats them as fallthrough attributes and applies them straight to MyButton's single root <button>, automatically — the rendered element ends up with both, with no code written to make that happen. This is what lets a wrapper component be styled and identified from the outside exactly like a plain HTML element would be.

The automatic part only works with exactly one root element

vue
<!-- Two roots — Vue has no single element to apply fallthrough to -->
<template>
  <span class="icon">★</span>
  <button>Click me</button>
</template>

With two top-level elements, Vue cannot guess which one id/class/anything else should land on, so with inheritAttrs: false set (or, in some Vue versions, simply by having multiple roots) nothing receives them automatically. The fix is manual: read attrs from setup's second argument and bind it explicitly to whichever element should carry it.

JavaScript
setup(_, { attrs, slots }) {
  return () => [
    h('span', { class: 'icon' }, '★'),
    h('button', attrs, slots.default ? slots.default() : null),
  ]
}

inheritAttrs: false without a manual bind is a silent no-op

Setting inheritAttrs: false alone does not remove fallthrough attributes — it only stops Vue's automatic placement of them on the root. Nothing else happens to them unless the component explicitly reads attrs and puts it somewhere. A component with inheritAttrs: false and no corresponding v-bind="$attrs" (in a template) or h(el, attrs, ...) (in a render function) simply drops every attribute the parent passed, with no warning that anything was lost.

What interviewers check

Whether you can explain why a two-element component "loses" the class a parent gave it — the answer is never "Vue is buggy," it is that automatic fallthrough is a single-root convenience, not a general guarantee, and anything beyond that convenience has to be wired by hand.

Now practice it

2 quizzes · 1 drill

Reading this page is the cheap half. These are the exercises that make you use it.