## 事象
コンポーネントに
```html
<template>
<div>
<div v-bind="$attrs"><slot></slot></div>
</div>
</template>
```
のように[[フォールスルー属性 (Vue)|フォールスルー属性]]を指定しているにも関わらず以下のような警告が出る。
```error
Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes
```
## 原因
[[defineOptions]]で[[inheritAttrs (Vue)|inheritAttrs]]に`false`を指定していないから。rootにフォールスルーすべきか、[[フォールスルー属性 (Vue)|フォールスルー属性]]を利用するべきかがはっきりしないため警告となる。
## 解決方法
[[defineOptions]]で[[inheritAttrs (Vue)|inheritAttrs]]に`false`を指定する。
```html
<script>
defineOptions({
inheritAttrs: false
})
</script>
<template>
<div>
<div v-bind="$attrs"><slot></slot></div>
</div>
</template>
```
## 参考
- [Fallthrough Attributes \| Vue\.js](https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance)