Vue3 warns even if v-bind="$attrs" and inheritAttrs: false are present on multi-root component
Vue version
v3.2.40
Link to minimal reproduction
Steps to reproduce
<script setup>
// App.vue
import { ref } from 'vue';
import Comp from './Comp.vue'
const show = ref(false);
</script>
<template>
<Comp v-show="show" />
</template>
=======================
<script>
// Comp.vue
export default {
inheritAttrs: false,
};
</script>
<template>
<header v-bind="$attrs"></header>
<footer></footer>
</template>
What is expected?
No warnings, because Vue3 supports multi-root components out-of-the-box.
What is actually happening?
[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.
at <Comp>
at <Repl>
System Info
No response
Any additional comments?
v-if works correctly
I guess it is by design and not related to inheritAttrs. As you can see, vShow accepts a HTMLElement, instead of Fragment.
v-show can only be used on single elements - or components witha single root element.
@LinusBorg Do we need to update Vue's official documentation?
It may indeed be worth adding a note about this to make it clearer.
You could add an issue in the docs repo and coordinte with the docs team where to best put that.
vue1.vue
<template>
<div>
<div id="target" v-bind="$attrs"></div>
</div>
</template>
<script>
export default {
name: "ee-navi",
inheritAttrs: false,
}
</script>
vue2.vue
<template>
<vue1 class="vue2"></vue1>
</template>
<style scoped>
.vue2 { font-size:100px }
</style>
the div id="target" has class="vue2" but not effective
Wouldn't it make sense to have some way to define directive target on multi-root components? Since v-bind="$attrs" already works fine in such cases for everything besides directives.