bug: Stencil Components: Nested Slots insert new children before last child if children components are added dynamically at run time.

[classicmike]

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.12.6 and 4.12.6-dev.1710356530.5aa886e

Current Behavior

I originally reported this bug in a reply see here but was told by @christian-bromann to report as new issue, see here.

A Dev build of stencil was created for me to test a fix for this issue, version 4.12.6-dev.1710356530.5aa886e. It is already happening on 4.12.6 as well

Upon testing, a bug was encountered which children elements of stencil components were inserting themselves before the last child.

The test involved creating a stencil based page using raw stencil components which buttons will be inserted dynamically using an add button like in the screenshot below:

As per original reporting of the issue, I am using both TestContainer and TestBtn which have to render their children and have scoped: true. I also have the experimentalSlotFixes: true as this bug only reveals itself when experimentalSlotFixes is true.

As you can see in the screenshot, I have a button to add more buttons and it is expected that any new buttons should be appended after the last button has been added. In the code, I have stored the list of buttons in a @State called the testButtonsarray. Once the add button has been clicked, it should add a new button to the testButtons array and the UI should render the buttons in the correct order, like so:

Here is the code on how I add the buttons below:

  addButton(e: Event) {
    e.preventDefault();

    const buttonCount = this.testButtons.length + 1;

    const newButton = (<test-container style={{display: 'block'}} class={ 'button-' + buttonCount }>
      <test-btn>Test Button {buttonCount}</test-btn>
    </test-container>);

    this.testButtons = [...this.testButtons, newButton];

    console.info('Show the correct order of the DOM elements', this.testButtons);
  }

However, what's happening right now is that the buttons that get added at run time, are added before the last button that was originally loaded, hence in the incorrect order. Screenshot is below. I have added some counters and a log to show the testButtons array representing the expected correct order.

So clearly the DOM rendered does not reflect the data it is meant to be rendering correctly.

How to replicate

1. Using the same repository, pull in to update changes. (https://github.com/classicmike/stencil-slot-test.git). If you don't have it cloned already please clone it.
2. Perform npm install on the root directory to ensure that you have installed the latest snapshot of the required dependencies.
3. cd packages/stencil-library and run npm start to run the stencil project.
4. Once the stencil project has started, you will be shown a page like so:
   
5. Press 'Add Test Button' a few times to replicate. Open up the console to examine the testButtons array which will already be console logged. Following the instructions will show you something like this:
   

If you would like to replay the bug from the start, you can refresh the page and try again.

The stencil component code source to demonstrate this bug is located here: Source of the code demonstrating the bug. The file name is test-demo.tsx

If you have any further questions about the bug, please let me know. Thanks.

Expected Behavior

It is expected that any new buttons should be appended after the last button has been added. In the code, I have stored the list of buttons in a @State called the testButtonsarray. Once the add button has been clicked, it should add a new button to the testButtons array and the UI should render the buttons in the correct order, like so:

System Info

System: node 20.6.1
    Platform: darwin (23.1.0)
   CPU Model: Apple M2 Pro (10 cpus)
    Compiler: /Users/michaeltran/Documents/prototype/stencil-slot-test/node_modules/@stencil/core/compiler/stencil.js
       Build: 1710356530
     Stencil: 4.12.6-dev.1710356530.5aa886e 💙
  TypeScript: 5.3.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.28.1

Steps to Reproduce

1. Using the same repository, pull in to update changes. (https://github.com/classicmike/stencil-slot-test.git). If you don't have it cloned already please clone it.
2. Perform npm install on the root directory to ensure that you have installed the latest snapshot of the required dependencies.
3. cd packages/stencil-library and run npm start to run the stencil project.
4. Once the stencil project has started, you will be shown a page like so:
   
5. Press 'Add Test Button' a few times to replicate. Open up the console to examine the testButtons array which will already be console logged. Following the instructions will show you something like this:
   

If you would like to replay the bug from the start, you can refresh the page and try again.

Code Reproduction URL

https://github.com/classicmike/stencil-slot-test.git

Additional Information

This test was done on native stencil components. I'm not sure if this bug would be happening for the framework wrappers as well such as Angular, React and Vue wrappers, although I suspect it is possible to replicate under those circumstances as well. The original bug raised was in fact in a react based wrapper environment.

[kerryj89]

I noticed this only happening with experimentalSlotFixes: true.

experimentalSlotFixes represents the following settings:

• slotChildNodesFix
• scopedSlotTextContentFix
• appendChildSlotFix
• cloneNodeFix

Setting all of those to true instead of using experimentalSlotFixes works 🤔.

[christian-bromann]

@classicmike thanks for raising the issue and @kerryj89 for confirming the problem. This might be related to #5443 which we are already looking into. I will ingest this into our backlog and will keep you updated as soon as I have updates.