vue: Can not clear slot content with vue@2.5.3

Version

2.5.3

Reproduction link

https://jsfiddle.net/yibuyisheng/s5xoxmv1/6/

Steps to reproduce

Create a Base Component with a slot, and pass in the slot with template tag with empty content.

What is expected?

The empty template slot should clear the content of Base Component’s corresponding slot.

What is actually happening?

Did not clear the content.


However, the vue@2.4.4 do the right thing: https://jsfiddle.net/yibuyisheng/s5xoxmv1/7/

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 1
  • Comments: 23 (12 by maintainers)

Most upvoted comments

Although it’s a hack, too, the following code seems to do a trick without introducing any extra HTML:

<template>
  {{null}}
</template>

IMO 2.4.4 is behaving incorrectly and 2.5.3 fixes the behavior. By design, fallback content appears when a slot receives nothing or all whitespace. “Clearing a slot’s fallback content with an empty <template> slot” sounds like a hack to me.

However if you still want to do that, you can use the zero-width space (&#8203;) as slot content.

@yyx990803 Sad that this is closed. I also would like to be able to clear the default slot content by an empty slot.

e.g. if you have a default “separator”-slot. Sometimes the iterated components may not have any html-tags in between because they break the float css styles. Also it’s not clean to just use “empty” tags if it would be more logical to use an empty template. (and using v-if’s is quite verbose)

So if an <template slot="..." /> exists, it should override the default value. This behaviour is logical. Why else should one define the template, if there is a default content. If I want the default content to be shown, I simply remove the empty template.

Using zero-width space to express “clearing the fallback content of a slot” sounds like a hack to me either…is there a better way for us to solve this with more explicit semantics?

So far, the best I’ve come up with is to use an empty separate component with a template: <i v-if="false"></i>, which allows you to bypass the rendering of unnecessary empty tags.