Component Life Cycle Methods not called as documented

[JulianLang]

Stencil version:

 @stencil/core@2.3.0

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

Consider the following structure:

<!-- toggle group A -->
<toggle-group>
   <toggle-button></toggle-button>

   <!-- nested toggle group B -->
   <toggle-group>
      <toggle-button></toggle-button>
   </toggle-group>
</toggle-group>

We have two nested toggle-groups where each should only find their own children. I rely on life-cycle hooks, so that the nested group (B) should look for its children first, mark them as "already belonging", then the next higher toggle-group (A) should search for its children (those, that are not marked yet) and so on.

Unfortunately I see the following life-cycle behavior:

ToggleGroup A:  connectedCallback
ToggleGroup B: connectedCallback
ToggleGroup A:  componentDidLoad
ToggleGroup B: componentDidLoad

which is not what I expect due to stencil's documentation.

Expected behavior:

The componentDidLoad life cycle hook gets called after all children's (slotted or not) as documented here:

• https://stenciljs.com/docs/component-lifecycle#componentdidload
• https://stenciljs.com/docs/component-lifecycle#lifecycle-hierarchy

So it should be:

ToggleGroup A:  connectedCallback
ToggleGroup B: connectedCallback
ToggleGroup B: componentDidLoad
ToggleGroup A:  componentDidLoad

Steps to reproduce:

• Build a structure similar to the one given above
• add connectedCallback and componentDidLoad to each parent-component (in my case toggle-group) with a console.log

Related code:

// insert any relevant code here

Other information:

There were already some issues about this before, but unfortunately they got closed. I hope this issue will make it, as I find it is fundamental to any component framework, that life-cycle hooks can be relied on.

• https://github.com/ionic-team/stencil/issues?q=is%3Aissue+life+cycle+order+is%3Aclosed

[rwaskiewicz]

Hey @JulianLang 👋

Thanks for the detailed bug report! It'd be super helpful if you could create a minimal reproduction case, would you be able to create a repository in GitHub that includes the app structure you describe above, and the exact steps needed to reproduce the issue (e.g. which NPM scripts we'd need to run)? That'd be a huge help to me and the team! 🙂

[JulianLang]

Hi @rwaskiewicz ,

I pushed the repro here: https://github.com/JulianLang/stencil-bug-lifecycle-hooks

You find some steps to get started within the README.
Reloading the app several times will show sporadic changes of the order of console logs.

But an interesting thing is, that I could not reproduce the original issue, that the toggle-groups didLoad are not called in the right order. But since the order is not stable anyway, I assume that was just luck^^

Some examples *:

* (sorry, I renamed Outer to A and Inner to B in the meantime of the screenshots, but you can reproduce it with my repro for better understanding anyways). Also even in one screenshot, the expected order (in regards to connectedCallback order vs didLoad order is not as I would expect.

• 
• 
• 

If you need additional help or info, I'm glad to help :)

[rwaskiewicz]

Thank you so much!

[JulianLang]

Hey, I just wanted to recheck what's the status of this issue :) Is there anything I can help with?

[pierrebaronqumu]

Looks related to #3580