Subscribe on changes!

Default slot does not render template without v-slot directive

avatar
Sep 14th 2020

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.

avatar
Sep 14th 2020

In V3, the <template> without the v-if/else/else-if/for/slot directives is treated as a HTML Content Template (<template>) element

avatar
Sep 14th 2020

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:
    <template v-pre>
      Hello {{''}}
      </template>
    
    still outputs Hello {{''}}
  • While using two templates:
      <template v-pre>
        <template>Hello 4</template>
      </template>
    
    renders two document fragments (https://jsfiddle.net/795man4w/)

There is also this issue in Vue 2 https://github.com/vuejs/vue/issues/10717

avatar
Sep 14th 2020

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.