midVue.js
How does Vue 3 handle 'Attribute Inheritance'?
Updated May 4, 2026
Short answer
Attributes passed to a component are automatically added to the root element of that component.
Deep explanation
This includes class, style, and v-on listeners. If the component has multiple root nodes (fragments), you must explicitly bind $attrs to one of them, or Vue will issue a warning. You can disable inheritance using inheritAttrs: false.
Real-world example
Building a custom 'Input' wrapper where you want the type or placeholder attributes to pass through to the underlying <input> tag.
Common mistakes
- Not realizing that `$attrs` contains all attributes not declared as props or emits.
Follow-up questions
- How do you access attributes in script setup?