# Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

**Code:** `[Vue warn]: Extraneous non-props attributes` · **Category:** Vue · **Seen on:** Vue

Attributes (class, style, listeners) passed to a component can't be applied because the component has multiple root nodes.

## Meaning

Vue applies fallthrough attrs to a single root element. With multiple roots or a fragment, bind them manually: `<div v-bind="$attrs">` or `inheritAttrs: false` with explicit placement. Wrap in a single root if simple.

## Common causes

- Component template with multiple root elements
- Fragment/text root
- `inheritAttrs: false` without binding `$attrs`
- Teleport/transition root
- Passing class/style to a multi-root component

## Quick fix

1. Wrap the template in one root element
2. Use `v-bind="$attrs"` on the intended element
3. Declare props/emits explicitly

## Detailed fix by platform

### Vue

1. `<script setup>defineOptions({ inheritAttrs: false })</script><template><div class="wrap"><input v-bind="$attrs"></div></template>`

## How to diagnose

1. **Roots** — Single?
2. **attrs** — Bound?
3. **inheritAttrs** — Set?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/vue-warn-extraneous-non-props-attributes)