Slots break when passing to child component

This issue has been tracked since 2022-07-28.

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 wrote this answer on 2022-08-19

Your app template slot syntax is wrong:

- <template name="rootSlot" slot-scope="props">
+ <template slot="rootSlot" slot-scope="props">
More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-06
Star Count 199800
Watcher Count 6093
Fork Count 32882
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date