bug: componentDidLoad is called in parent before children have loaded

[mpayson]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.17.4

Current Behavior

The componentDidLoad lifecycle method is called in a parent before its children have loaded

Expected Behavior

componentDidLoad is called after all the children have loaded as described in the documentation: https://stenciljs.com/docs/component-lifecycle#lifecycle-hierarchy

Steps to Reproduce

1. Clone the reproduction URL
2. Install dependencies yarn
3. Run then open the demo page yarn vite
4. Open the developer console
5. Notice "PARENT LOADED" is logged before "CHILD LOADED"

Note, the demo uses the index.html page and loads the built stencil components. The source code for the stencil components is in the src/ directory.

Code Reproduction URL

https://github.com/mpayson/stencil-debug

Additional Information

I was also able to reproduce this issue with another application setup (React + Webpack). Thanks!

[alicewriteswrongs]

Hello @mpayson, thanks for filing this issue and for providing a reproduction repo! It's a big help for us when triaging issues.

I'm able to confirm the behavior that you describe and that it doesn't match up with what's described in the Stencil documentation. I'm going to label this so it gets ingested into our backlog and the Stencil team can prioritize it.

Thanks again for filing!

[pierrebaronqumu]

This is still present in 4.0.5, I experienced this in our UI-Kit. It fails with synchronous componentWillLoad() and componentDidLoad() (compared to the initial GitHub reproduction).

[pierrebaronqumu]

I ran some tests and I noticed the following:

• bug is still present in 4.2.1
• bug is not present when using the dist build
• bug is present when using the dist-custom-elements build, no matter the customElementsExportBehavior selected.

[christian-bromann]

A fix for this bug has been published in Stencil v4.21.0!