Description
Version
1.0.3
Reproduction link
https://codesandbox.io/s/vue-template-xyodj
Steps to reproduce
Shallow mount a component which root component has multiple slots and different slot syntax is used for them.
What is expected?
Properly renders the shallow mounted component's root's slots.
What is actually happening?
Does not renders the slots contents or renders "<template></template>"
.
It works if you mix the v-slot: syntax with the # syntax but if you mix the slot=" " syntax with any other the rendered html will be broken. It also works properly if you don't mix the syntax.
Actually, this is a problem because I use Vuetify and some why I can only use the deprecated slot=" " syntax.
example:
<VNavigationDrawer>
<template slot="prepend">
renders
</template>
<span>default slot content</span>
</VNavigationDrawer>
<VNavigationDrawer>
<template v-slot:prepend>
does not renders
</template>
<span>default slot content</span>
</VNavigationDrawer>
edit:
The default slot considered as slot=" " syntax in this case so for my Vuetify example the default slot causes the issue. I edited the examples according to this.
workaround:
<VNavigationDrawer>
<template v-slot:prepend>
renders
</template>
<template v-slot:default>
<span>default slot content</span>
</template>
</VNavigationDrawer>