Skip to content

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

Description

@danyball

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:

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within StencilStencil v5This is slated for Stencil v5 (Release date TBD)

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions