Slots break when passing to child component

[johannes-z]

Version

2.7.8

Reproduction link

github.com/johannes-z/vue27

Steps to reproduce

1. git clone https://github.com/johannes-z/vue27.git
2. git checkout -b bug/slots
3. pnpm install
4. pnpm run dev

What is expected?

ChildComponent should print customSlot AND rootSlot.

expected rendered HTML:

<div>
   <div>test</div>
   <div>default: </div>
   <div>rootSlot: scopedSlot from Root</div>
   <div>customSlot: <b>scopedSlot from MainComponent</b></div>
</div>

What is actually happening?

rootSlot is missing already missing from $scopedSlots inside MainComponent.

actually rendered HTML:

<div>
   <div>test</div>
   <div>default: scopedSlot from Root</div>
   <div>rootSlot: </div>
   <div>customSlot: <b>scopedSlot from MainComponent</b></div>
</div>

---

[yyx990803]

Your app template slot syntax is wrong:

- <template name="rootSlot" slot-scope="props">
+ <template slot="rootSlot" slot-scope="props">