$scopedSlots are missing non-scoped slot functions when using @vue/compat

[xanf]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/js-y4s9r7?file=index.js

Steps to reproduce

1. Open reproduction
2. Observe that $slots count and $scopedSlots count is out of sync

What is expected?

$scopedSlots have all available slots, including non-scoped ones

What is actually happening?

$scopedSlots explicitly ignores non-scoped slots (like it was <Vue 2.6)

System Info

No response

Any additional comments?

This behaviour is explicitly added in 7f93c76

However, this is not the behaviour of Vue.js 2: see https://stackblitz.com/edit/js-gdxvd8?file=index.js,index.html

I've also explicitly added to the bottom of Vue.js 2 sandbox copy& paste of this test: https://github.com/vuejs/core/blob/main/packages/vue-compat/__tests__/instance.spec.ts#L286-L303 to demonstrate that test also check non-Vue.js 2 behaviour

[baiwusanyu-c]

Is this really a vue3 bug, either from the unit tests or from the original commit, I think $scopedSlots will only contain scoped slots, which seems to be intentional, is this a fix logic for the vue2 history issue that makes It is more correct in vue3?

[markrian]

@baiwusanyu-c I think it is a bug, or at least a hindrance to migrating from 2 to 3. In particular, this affects default slots a lot more than named slots, since it's very easy to unintentionally go through the legacy slot code paths rather than the more modern scoped slot paths.

That is:

<!-- This is a legacy default slot -->
<foo-bar>default slot content</foo-bar>

<!-- This is a modern default slot -->
<foo-bar><template #default>default slot content</template></foo-bar>

What does this mean in practice? Well, a migration would go roughly like this (just considering scoped slot API changes):

0. Use Vue 2.6+ (not 3 yet)
1. Replace all $slots.foo with $scopedSlots.foo().
2. Switch to @vue/compat build
3. Replace all $scopedSlots.foo() with $slots.foo()
4. Switch to Vue 3 proper.

The problem is that step 2 would fail because of this behaviour. Consider this, under @vue/compat:

<!-- FooBar's $scopedSlots.default is undefined, and $slots.default` is a function. -->
<foo-bar>default slot content</foo-bar>

<!-- FooBar's $scopedSlots.default and $slots.default are functions. -->
<foo-bar><template #default>default slot content</template></foo-bar>

That is, it's not just the $scopedSlots references that would have to change, but templates which pass default slot content using standard syntax would have to use the explicit named default slot syntax instead.