Ambiguous statements about default slots

[woothu]

In new slot documentation in one place it states:

Whenever there are multiple slots, use the full <template> based syntax for all slots

And in another section (Named Slots Shorthand) there is an example:

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

So what is the best practice for defining default slot when there are multiple of them?

[phanan]

If I get what you mean correctly, it seems you're confused between the abbreviated syntax for lone default slots (<user><template v-slot:default="slotProps"/></user> => <user v-slot="slotProps"/>) and the shorthand syntax (<template v-slot:header> => <template #header>). The example above uses shorthand syntax while still correctly adheres to the "full <template> based" syntax for multiple slots.

[Justineo]

Whenever there are multiple slots, use the full based syntax for all slots

I believe it should be stated as “Whenever there are multiple slots with slot props passing down”?

[woothu]

@phanan

No, I meant that the example should have wrapper over default slot

OR

It should be stated:

Whenever there are multiple slots, use the full based syntax for all named slots

[woothu]

Could you please specify this topic?

[phanan]

I don't have a strong opinion unfortunately. Reopening for exposure.

[woothu]

Just to clarify what I have meant:
In one place docs says to wrap default slot in template tags when there are multiple slots:

Whenever there are multiple slots, use the full <template> based syntax for all

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

And in another places slot docs doesn't stick to this rule:

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

And yet, in another place says it is optional to stick to this rule:

However, you can still wrap default slot content in a <template> if you wish to be explicit:

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

[sdras]

I'm going to try to rewrite this section with a few more details coming up with the Vue 3 release, I'll try to fix this in that update.