Provide a way to explicitly fill a (scoped) slot with nothing

[Justineo]

What problem does this feature solve?

See #7064 for some background information.

After providing an explicit way to declare that a slot is “empty”, we won't have to use props to control whether each slot is gonna be rendered or not.

What does the proposed API look like?

<v-component>
  <template slot="extra" empty></template>
</v-component>

or

<v-component>
  <template slot="extra"><empty-slot/></template>
</v-component>

[posva]

what about creating a custom component in userland for this use case:

const EmptySlot = {
  functional: true,
  render: (h, { data }) => h('template', data, '')
}

Forcing no content seems to be a very specific use case and this is even shorter 😄

[Justineo]

@posva The problem here is that although the zero-width space is supposed to be “invisible”, it does produce an extra line box, which acts like a margin-top for following elements. It's slightly different with “nothing”.

The actual use case is that while creating a “layout” component, it's possible that different parts are optional, eg. I may have a <v-alert> component like this:

<template>
<div class="alert">
  <slot name="title"><header><slot name="title-content">Alert</slot></header></slot>
  <div class="content"><slot></slot></div>
</div>
</template>

<style scoped>
.content {
  border-top: 1px solid #ccc;
}

.content:first-child {
  border-top: none; /* only when slot "title" is empty */
}
</style>

And use it like this:

<!-- default title -->
<v-alert>Something went wrong!</v-alert>

<!-- custom title -->
<v-alert>
  <slot name="title-content">Oops</slot>
  Something went wrong!
</v-alert>

<!-- no title -->
<v-alert>
  <slot name="title"><empty-slot/></slot>
  Something went wrong!
</v-alert>

Although I can use a prop to control the rendering of each optional slot (and it may be easier to type), providing a special syntax or component (like </>?) automatically makes all slots clearable. Otherwise component authors may provide different ways to handle this scenario:

<v-alert show-title>...</v-alert>
<v-alert :slots="['default']">...</v-alert>
<v-alert :hide-slots="['title']">...</v-alert>

---

BTW, earlier today I discussed this with @Jinjiang and we found that clearing a named slot isn't possible according to current WebComponents implementation and this would creates another problem for Vue components to be compiled to WCs. But I found that currently it seems that named slots in WCs do not accept TextNodes, which is already different from Vue's slot implementation. So I'm not sure about this now.

[posva]

The last comment is interesting. I tried out with an empty string and it seems to work as well (updated the comment above)

[Justineo]

@posva It inserts an actual HTML <template> element and makes selectors like :first-child doesn't work as expected.

[posva]

Damn, I only tested on Chrome 🙁

[Justineo]

I'm afraid it doesn't work even in Chrome...

In this case

The <p> element doesn't match :first-child.

[sirlancelot]

I'm kind of on the fence on whether Vue should allow clearing of a slot fallback in core. It seems a little hacky to me.

It's possible to get exactly what you want in Userland though, I created a sample here: https://codepen.io/sirlancelot/pen/oqxzMq?editors=1010

UPDATE: Turns out if you don't use a functional component, then it just works!

[Justineo]

Turns out if you don't use a functional component, then it just works!

Confirmed.

But now this feels like a real hack to me...A functional component that renders nothing behaves differently with a normal one, which may be unwanted consistency for Vue to handle slot contents.

Before v2.5.3, Vue did clear a slot if you just provide nothing for a slot, which was later considered as a bug and fixed. I cannot guarantee that in future versions it wouldn't happen to the hack above.

[Justineo]

@sirlancelot I've issued a bug report (#7841) for the current behavior (which I don't think is expected).

[plehnen]

Before v2.5.3, Vue did clear a slot if you just provide nothing for a slot, which was later considered as a bug and fixed.

But that was a logical behaviour. I explicitly provide an empty slot, therefore I want to clear the default slot. This is the easiest and most logical solution. I don't get why this can't be the way to do it?
But anyhow, an explicit (and a little verbose) "empty"-keyword would be fine too, but at least provide a way to do it (please!).

[Justineo]

As #7841 is closed as a wontfix (#7841 (comment)), we can rely on the current behavior so that this feature request can be stably worked aroud in userland (though still feels hacky to me). We can close this if we are not gonna implement this in core. @yyx990803