Slots resolving issue on subsequent components

[miljan-aleksic]

Version

2.5.13

Reproduction link

https://codesandbox.io/s/316wjk4w41

Steps to reproduce

As stated by the docs slots() in fn components should be used only when the component knows about them, otherwise should pass along the children and the next component could deal with them.

What is expected?

I would expect that all children component would resolve slots correctly as long as children are passed along.

What is actually happening?

Only the initial component gets resolved the slots well, while any subsequent component that gets the children passed along doesn't.

[posva]

When passing down children, you have to specify where to place them although I would agree it would make things easier if they were assigned automatically to their corresponding but think about it when writing a template. This is the way you would do it

// ComponentA.vue
<CompB>
  <slot name="foo" slot="foo"/>
</CompB>

Note how you have to explicitly name the slot and say it is a slot of CompB

You need to do the same things with render functions, here is an example doing it in functional and non-functional components https://jsfiddle.net/posva/fseLahxu/

@yyx990803 I'm not sure if I'm giving the right solution. If it is, I think I should do a PR to document this, although I'm not sure what approach to take cc @chrisvfritz
The documentation only shows off the slot attribute but doesn't have any section about how to pass slots in render functions

[chrisvfritz]

@posva I think the difference is templates don't have a concept of just children, since they're not meant to be used for transparent wrappers of other components. And it's not exactly a "transparent" wrapper if it has to know about the slots of the child in order to explicitly pass them. So this does sound like a bug to me.

[miljan-aleksic]

Thank you @yyx990803 :)