bug: component's child initial timing leads to unexpected behavior
Author: danyballCreated Mar 11, 2026Updated Aug 7, 2026
LabelsBug: ValidatedStencil v5
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
4.36.0
Current Behavior
Our components setup:
<sdx-select>
<sdx-select-list/> // slotted
</sdx-select>We are using a synchronous store to share date between these 2 components. But quite simple:
// sdx-select-list
public connectedCallback() {
// Register self
this.store.set("listEl", this.el)
}If a listEl is registered in the store, the sdx-select will not render FOO. Our bug now happens here. Since 4.36.0 it sometimes renders FOO, which it should not.
// sdx-select (pseudocode)
public componentWillLoad() {
if (this.state.get().listEl) {
this.hasConsumerProvidedListEl = true
}
}
render() {
if(!this.hasConsumerProvidedListEl) { <FOO /> }
}My analysis so far:
- its definitely caused by https://github.com/stenciljs/core/pull/6331 @danielleroux
- console.logs shows, that sdx-select-list
connectedCallbackcould sometimes happen AFTER sdx-selectwillLoad(which is not in versions <4.36.0)
Expected Behavior
Stable order of component's lifecycle hooks.
System Info
System: node 22.19.0
Platform: darwin (25.3.0)
CPU Model: Apple M1 Max (10 cpus)
Compiler: /node_modules/@stencil/core/compiler/stencil.js
Build: 1752598220
Stencil: 4.36.0
TypeScript: 5.5.4
Rollup: 4.34.9
Parse5: 7.2.1
jQuery: 4.0.0-pre
Terser: 5.37.0Steps to Reproduce
Could not reproduce it by using stencil-component-starter project yet. The init order is stable there. Both components firing connectedCallback first, after that the willLoad of the parent component (sdx-select in my case) is firing. This is what I expect.
The bug happens more often in Angular apps.
Code Reproduction URL
not yet
Additional Information
No response
Source: stenciljs/core