Vue: Inconsistent behavior between functional component and normal ones

[Justineo]

Version

2.5.16

Reproduction link

https://codesandbox.io/s/9y8kz86624

Steps to reproduce

1. create a component with a slot, and add some fallback content to the slot
2. create a component with render function h => h() and use it as the slot content
3. create a functional component with render function h => h() and use it as the slot content

What is expected?

Fallback content should be rendered.

What is actually happening?

For the normal component, fallback content is cleared and a comment node is rendered. For the functional component, the fallback content is rendered.

---

Related: https://github.com/vuejs/vue/issues/7829#issuecomment-373131958

[posva]

I think this is because of the order of rendering: functional components are rendered before the child using it as a slot gets rendered, but it's not the case for normal components

[Justineo]

I think this might be unwanted right? Solving #7829 depending on current behavior seems to be fragile...

[robcresswell]

Is https://github.com/bootstrap-vue/bootstrap-vue/issues/1680 related to this? We seem to have some odd failures in Bootstrap-Vue that several people have flagged as only occuring in the 2.5.16 and not beforehand.

[blake-newman]

This is most likely the same as #7958, can you confirm?

[blake-newman]

Flagging as important, due to downstream issues with other libararies

[yyx990803]

Removing regression tag as this behavior has been there all along 2.x

[yyx990803]

This is going to be a wontfix for 2.x. The behavior difference between functional and normal components have been explicit since the beginning of 2.0: functional components are eagerly rendered in the parent context, while stateful ones are not (they are passed down as a placeholder node and only instantiated during patch).

In 3.x we will likely change the behavior to make both more consistent - i.e. making functional components behave more like normal stateful components. However, that requires significant changes to how functional components work and would be a breaking change.

[yyx990803]

Also: this is not related to #7958 or the regression found in bootstrap-vue.