Named slot is getting inserted twice

[lazabogdan]

In the following example, slot1 is getting inserted twice. Is this normal?
Any idea why it's behaving like this?

https://jsfiddle.net/6tc2wzne/

[lazabogdan]

Thank you! Awesome support

[lazabogdan]

@yyx990803 Unfortunately it doesn't solve the duplicate insertion for the named slot when using v-else on the unnamed slot. If you update your test you'll see the issue, div[slot="one"] is inserted twice:

it('slot compilation order with v-if', function () {
  var vm = new Vue({
    el: document.createElement('div'),
    template:
      '<test>' +
        '<div slot="one">slot1</div>' +
        'default content' +
      '</test>',
    components: {
      test: {
        template:
          '<div>' +
            '<slot v-if="true"></slot> ' +
            '<slot v-else></slot> ' +
            '<slot name="one"></slot>' +
          '</div>',
        replace: true
      }
    }
  })
  expect(vm.$el.textContent).toBe('default content slot1')
})

[yyx990803]

Why would you use it this way though? There should be only one default slot.

[yyx990803]

I changed the test case to yours but it passes for me.

[lazabogdan]

Hmm, I'll double check if I've got the right commit in the morning.

About the use case, here's a simple example:

<template>
    <div v-show="isVisible" :class="sidebarClass">

        <!-- Scrollable -->
        <div v-if="scrollable" v-scrollable="scrollable">
            <slot></slot>
        </div>

        <!-- Non Scrollable -->
        <slot v-else></slot>

        <slot name="root"></slot>
    </div>
</template>

The idea on this sample is when scrollable is true, wrap the default slot with the scrollable div, otherwise just insert the content directly. I know this can be solved with partials, but why complicate the template with partials when the v-if v-else syntax should just work for simple scenarios like this one, don't you think?

[lazabogdan]

There should be only one default slot.

Doesn't the v-if v-else syntax ensure that only one default slot makes it in the page, since it's used with two unnamed slots?

[yyx990803]

Yeah, now I see what you mean. It was confusing with just v-if and v-else though.

[lazabogdan]

Sorry for the delay. I had the right commit, but I forgot to build it so of course in my project where I was importing Vue and testing, I was using the dist from the 1.0.14 release. So it's all good. Thanks!