#6636·core

bug: component's child initial timing leads to unexpected behavior

Author: danyballCreated Mar 11, 2026Updated Aug 7, 2026
LabelsBug: ValidatedStencil v5

Prerequisites

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 connectedCallback could sometimes happen AFTER sdx-select willLoad (which is not in versions <4.36.0)

Expected Behavior

Stable order of component's lifecycle hooks.

System Info

bash
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.0

Steps 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