Vue: Feature request: v-fragment-root on <slot>

[prog-rajkamal]

Motivation

As you might already know, <slot> does not allow attributes whether html or vue directives (except v-if) the main reason behind this is

Directives are ignored on because it's only a placeholder for parent inserted content, and it may contain non-elements, e,g, just text nodes.

My feature request aims to provide a way to create an exception for the non-elements. so that we can use v-el, v-show etc on <slot>

this is a pretty popular request https://github.com/vuejs/vue/issues/2494 https://github.com/vuejs/vue/issues/2390 https://github.com/vuejs/vue/issues/2128

Syntax

the core idea is that in most use-cases, we will be using directives on _named_ slots instead of default slot and those named slots are more likely to not be a fragment instance. so we basically need mechanism to handle edge cases only.

To that end, I propose to add a directive v-fragment-root (name will hopefully change in future ).

Syntax:

<slot name="item" 
      v-fragment-root="div"   //use <div> tag for fragments   
      class="my-item"         //add attributes on slot
></slot>

<slot 
     v-fragment-root=""      //this causes current behavior
     class="my-item"         //attribute is ignored and a warning is raised.
></slot>

Possible Problems

1) v-for will either not work or will be confusing to use. As <slot> will depend on both props passed to component and <slot> tags passed.
2) v-el is slightly different case. a named <slot> can be targetted multiple times but v-el can target only one element. like in following code.

 <my-tag class="hack">
    <child1 slot="item"> </child1>
    <child2 slot="item"> </child2>
   <child3 slot="item"> </child3>
 </my-tag>

[fullfs]

@prog-rajkamal Hello! Good to see such detailed feature request. I can say its related to #1726 by now.

[prog-rajkamal]

@fullfs thanks.
it is related to https://github.com/vuejs/vue/issues/1726 as both deal with slot api. though https://github.com/vuejs/vue/issues/1726 proposal act through js while my feature request act through html. so they are actually complimentary.

[simplesmiler]

@nothing628 you can not achieve this with slots currently in 1.x, but since 1.0.19 you can pass components as props: https://jsfiddle.net/simplesmiler/5p420nbe/

[nothing628]

thanks @simplesmiler , it solve my problem. I think it will take a long time

[yyx990803]

For 1.x, I think this is overly complex for an edge use case. For me it seems better to just wrap the slot in an element so that it works for element/text content alike.

In 2.x, you can programmatically inspect and modify slot content using render functions.