When Components Behave Like HTML: Understanding Attribute Inheritance in Vue

There’s a small moment when using a component that feels almost too convenient to question.

You write:

<MyButton class="primary" disabled />

And somehow, without doing anything special, those attributes just work.

The button looks styled.

The disabled state applies.

Everything behaves as expected.

But if you stop and think about it…

Where did those attributes actually go?

The Invisible Hand-Off

Inside your component, you might have something like this:

<template>
  <button>Click</button>
</template>

There’s no class prop.

No disabled prop.

Nothing explicitly handling those attributes.

And yet, they still end up on the button.

That’s not accidental.

That’s Vue doing something very intentional.

The Idea of “Falling Through”

When Vue sees attributes that are not defined as props, it doesn’t discard them.

It forwards them.

So this:

<MyButton class="primary" disabled />

Becomes:

<button class="primary" disabled>Click</button>

Automatically.

It’s as if the component says:

“I don’t know what to do with these… so I’ll pass them along”

This behavior is called attribute inheritance (or fallthrough attributes).

Components That Don’t Get in the Way

This feature exists for a deeper reason.

Without it, components would feel rigid.

Every time you needed something like class, id, or disabled, you’d have to explicitly define it as a prop.

That would quickly turn into:

Repetition
Boilerplate
Maintenance overhead

Instead, Vue makes components behave more like enhanced HTML elements.

They don’t block attributes.

They let them pass through.

Where Do Attributes Actually Go?

There’s an important detail here.

Attributes don’t just float around.

They land on a specific place:

The root element of the component

So if your component looks like:

<template>
  <button>Click</button>
</template>

Everything is straightforward.

But if you change it to:

<template>
  <div>
    <button>Click</button>
  </div>
</template>

Now things shift.

Your attributes will go to the <div>, not the <button>.

That might be correct.

Or it might be completely wrong for your intent.

When the Default Stops Working

There comes a point where automatic behavior becomes a limitation.

You might want:

• class applied to the button
• not the wrapper
• not the root

This is where Vue gives you control.

You can turn off automatic inheritance and decide manually:

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

<template>
  <button v-bind="$attrs">Click</button>
</template>

Now the flow is no longer implicit.

You decide exactly where attributes go.

Props vs Attributes: A Subtle Distinction

At this point, it’s easy to blur the lines.

Props and attributes can look similar.

But they serve different purposes.

Props are explicit.

They define:

“What this component expects”

Attributes are implicit.

They represent:

“Anything extra that should pass through”

This distinction matters.

Because props shape the component’s API.

Attributes preserve flexibility.

The Special Case of class and style

There’s one more layer that often goes unnoticed.

class and style don’t just pass through.

They merge.

If your component has:

<button class="base">Click</button>

And you use:

<MyButton class="primary" />

The result becomes:

<button class="base primary">Click</button>

Not replaced.

Combined.

That small detail makes components feel much more natural to use.

The Trade-off Behind the Convenience

Attribute inheritance is incredibly helpful.

But it’s also implicit.

You don’t always see where attributes go.

You don’t always control how they’re applied.

And that can lead to confusion in more complex components.

So Vue gives you both:

• convenience by default
• control when needed

The Bigger Insight

Attribute inheritance exists because components shouldn’t feel like barriers.

They should feel like extensions of HTML.

Not something you fight against.

But something that adapts to you.

And sometimes, the most powerful feature is not what a system forces you to define…

But what it quietly allows you to pass through.