The v-slot directive breaks an example for functional components

[Justineo]

https://vuejs.org/v2/guide/render-function.html#slots-vs-children

With code example being:

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

But v-slot is not allowed to be used on the element itself. It should be at least:

<my-functional-component>
  <template v-slot:foo>
    <p>first</p>
  </template>
  <p>second</p>
</my-functional-component>

Or to be more clear:

<my-functional-component>
  <template v-slot:foo>
    <p>first</p>
  </template>
  <template v-slot>
    <p>second</p>
  </template>
</my-functional-component>

But after updating to the valid syntax, the following part is not accurate anymore:

For this component, children will give you both paragraphs, slots().default will give you only the second, and slots().foo will give you only the first.

children won't give you both paragraphs, instead only those aren't wrapped inside the <template> element. I'm not sure how to re-organize this part actually.

[NataliaTepluhina]

@Justineo to be more precise, if you wrap it in <template> without v-slot directive, it will be shown in children:

<my-functional-component>
  <template v-slot:foo>
    <p>first</p>
  </template>
  <template>
    <p>second</p>
  </template>
</my-functional-component>

I am not sure how to rewrite it correctly too but will give it a try 🤔

[Justineo]

to be more precise, if you wrap it in <template> without v-slot directive, it will be shown in children:

It's the same as the old slot="default" so I'd say it's expected. I think there might be a regression after we introduce v-slot that breaks the old behavior for functional components.

/cc @yyx990803

[Justineo]

PS. See this sandbox. The children passing down isn't working for v-slot.

[NataliaTepluhina]

I think there might be a regression after we introduce v-slot that breaks the old behavior for functional components.

Agreed, with some testing it seems the issue is definitely in v-slot directive

@Justineo there is a small mistake in your sandbox: import MyComponent from "./components/MyComponent" should be import MyComponent from "./components/MyFunctionalComponent" 😅

[Justineo]

@NataliaTepluhina Oh it's not successfully saved since my last edit, fixed now.

[andtii]

@NataliaTepluhina and @Justineo Any progress on this?