Version

2.5.2

Reproduction link

https://jsfiddle.net/daxchen/k75y6tu0/

Steps to reproduce

My use case is that I have a default layout with Toolbar and main content wrapper. But some pages needs a SearchBar and some don't, and layouts may have different levels.

So I created a component called LayoutDefault as a base for other layouts to use. And because I want to be able to replace the default Toolbar when needed, I put the default Toolbar in <slot name="toolbar">, with Toolbar as fallback content.

Code snippet:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

I make these kind of components because I want to be able to:

1. Replace the default Toolbar if need.
2. Using the default Toolbar, but pass things to its slot ("toolbarSlot" in above example)

And then in other layout components, I do this:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

As you can see, to pass components to grandchild's slots, I used this pattern: <slot name="foo" slot="foo">.

For some reason, components passed using this pattern will be passed to the default slot if there's one.

See examples 2, 3, and 4 in the reproduction.

What is expected?

I expect when no nothing is passed to a named slot, the fallback content will be rendered, with it's slots too.

What is actually happening?

In example 2, the replaced Toolbar is rendered in LayoutDefault's default slot.

In example 3 and 4, SearchBar is passed to slot="toolbarSlot", but not rendered.

Is this the expected behavior?
Or if there's a way for me to make these kind of reusable layouts with each default parts replaceable, and if using the default parts, be able to pass components into their (default parts) slots?