Default slot does not render template without v-slot directive
Version
3.0.0-rc.10
Reproduction link
https://jsfiddle.net/doman/k1w2L9vj/14/
Steps to reproduce
Pass a template as the default slot without using v-slot directive.
i.e.
<my-comp>
<template>
<p>render me</p>
</template>
</my-comp>
What is expected?
The template's contents should be inserted into the DOM and rendered into the default slot.
What is actually happening?
The template and its contents are being inserted into the DOM but the template content is not rendered.
I have a component that passes data into the default slot and and I use v-slot to access that data. But in one instance when I didn't need the data, I left the directive off and noticed my contents were not being rendered properly. I think under normal circumstances you just add #default
to the tag but it still seems like a bug.
In V3, the <template>
without the v-if/else/else-if/for/slot
directives is treated as a HTML Content Template (<template>
) element
I think it would make sense to only treat it as an template
tag if it's used alongside v-pre
. In Vue 2, the behavior is not completely consistent:
- Using one single template:
still outputs<template v-pre> Hello {{''}} </template>
Hello {{''}}
- While using two templates:
renders two document fragments (https://jsfiddle.net/795man4w/)<template v-pre> <template>Hello 4</template> </template>
There is also this issue in Vue 2 https://github.com/vuejs/vue/issues/10717
I guess the question is why would one ever use <template>
without a directive like that. It is indeed a different behavior from v2 but I don't think the v2 behavior has any practical use cases (while at the same time blocking the ability to render a native <template>
tag). For that I would consider this an intended change (minor breakage) and we should document it in the migration guide.