search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.43k stars 781 forks source link

Component Life Cycle Methods not called as documented #2954

Open JulianLang opened 3 years ago

JulianLang commented 3 years ago

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:

So it should be:

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

Steps to reproduce:

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.

rwaskiewicz commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Thank you so much!

JulianLang commented 2 years ago

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

pierrebaronqumu commented 10 months ago

Looks related to https://github.com/ionic-team/stencil/issues/3580