multiple v-slot with same name broken

[tcastelly]

Version

2.6.2

Reproduction link

https://jsfiddle.net/0e17wumz/

Steps to reproduce

With new syntax it's not possible to use multiple v-slot with same name.

What is expected?

Display the slots

What is actually happening?

Nothing is displayed

---

• With deprecated slot it works: https://jsfiddle.net/odvyztgw/

[posva]

keep in mind v-slot:partLeft is transformed to v-slot:partleft by the browser which prevents us to use camel cased names for slots. Maybe we should transform the kebab case to camelCase as we do with props

[yyx990803]

Why would you do that anyway?

[yyx990803]

So if you fix the casing it works: https://jsfiddle.net/yyx990803/zwm91b3x/

Note that with v-slot the slot name ends up in the attribute name so it is normalized to all-lowercase by the browser if you write the template inside the DOM.

[tcastelly]

I have some components like this custom select. Inside I want to display option slot.

<BaseSelect v-model="selected1">
  <BaseOption slot="option" :value="1">Option 1</BaseOption>
  <BaseOption slot="option" :value="2">Option 2</BaseOption>
</BaseSelect>

I guess it's possible to do something like this:

<BaseSelect v-model="selected1">
  <template slot="options">
    <BaseOption :value="1">Option 1</BaseOption>
    <BaseOption :value="2">Option 2</BaseOption>
  </template>
</BaseSelect>

(This component can expect other slots).

By the way even if the casing is fixed, only the last "instance" of the same slot is displayed (Left (2) Right (2), I expect Left (1)Left (2) Right (1)Right (2))

[yyx990803]

In the new syntax you must group elements that belong to the same slot under the same template.