Slot: v-for slot elements are showing as sub nested slot children (different to static elements)
Vue version
3.2.33
Link to minimal reproduction
https://codesandbox.io/s/polished-monad-edii2e?file=/src/components/VForSlotNesting.vue
Steps to reproduce
See the console in the codesandbox provided.
Create a component with a slot. Use that component and put 3 divs as children and notice the slot data for that component is an array of 3 nodes. Now v-for a div 3 times instead and notice the 3 slots are now wrapped in an object.
What is expected?
Slots no matter dynamically rendered children or statically should resemble the same slot data structure.
What is actually happening?
Seems slots are being wrapped because the v-for is considered a layer.
System Info
No response
Any additional comments?
No response
For reasons how Vue 3's virtualDOM works, Elements of a loop are wrapped in a Fragment. That's not a bug, it's how it works. You Will need to work with this. You can detect a Fragment like this:
import { Fragment } from 'vue'
if (vnode.type === Fragment) {
return vnode.children // those are the 3 divs
}