Named slot won't render

[privatenumber]

Version

2.5.15

Reproduction link

https://jsfiddle.net/hirokiosame/dronjdzm/63/

Steps to reproduce

The jsfiddle link reproduces the issue but it's a pretty intricate combination that reproduces it.

Removing the slot="namedSlot from the div and wrapping it with <template slot="namedSlot">, or removing the usage of the functional component noOp, or disabling reactivity via changing undefined tofalse` on L20 or removing the dependency on L9 will fix the issue.

What is expected?

For the named slot to render. In the case of the reproduction, the "THIS TEXT SHOULD RENDER" text.

What is actually happening?

The named slot is not rendering.

[LinusBorg]

There's definitely something weird going on.

I added a log to the functional component's render function to inspect the slots that are received:

The weird thing is that it's rendered twice (can be explained for itself), but once it receives the slot as "namedSlot", and once as "default", even though the setup is the same.

https://jsfiddle.net/dronjdzm/70/

[gebilaoxiong]

I'm afraid not render it is right.

see: https://github.com/vuejs/vue/blob/dev/test/unit/features/component/component-slot.spec.js#L828-L857

[LinusBorg]

@gebilaoxiong I'm not sure that test case applies to the situation we have here, can you elaborate?

The test case you linked to incorporates one functional component passing slot content to another. That's a different situation that ours in this issue.

[gebilaoxiong]

@LinusBorg
I did a simple example:
https://jsfiddle.net/dronjdzm/75/

I think the difference in understanding is on the template of CompB

const CompB = {
  props: ['state'],
  components: {
    CompA
  },
  template: `
    <div>
      <comp-a>
        <slot name="slotA"></slot>
        {{ state.prop }}
      </comp-a>  
    </div>
  `
};

When CompB is rendered, it generates a structure similar to the follow vnode：

<div>
  <comp-a>
     <span slot="slotA">
       THIS TEXT SHOULD RENDER
     </span>
    {{ state.prop }}
  </comp-a>  
</div>

When CompA is rendered, the slots is:

{
  slotA:  [Vnode], // span element
  default: [Vnode] // state.prop
}

so I think not render it is right.

[gebilaoxiong]

Perhaps the slot="slotA" on the span should be deleted when the CompB is rendered.

Maybe you're right