Nested Slots render children components in the wrong order if children components are added dynamically at run time. about stencil

[tanner-reits]

Hey there @classicmike 👋

I was able to confirm your issue, but also found that it will be resolved by #5365 which has already merged and will be released in the next version of Stencil on Monday! In the meantime, I created a dev build of Stencil which includes the change. You can test it out by installing @stencil/[email protected].

Gonna close this issue, but please reopen if you still have any problems!

[classicmike]

Hi @tanner-reits,

Thanks for taking a look at the issue. I'll give that test version a test and get back to you if there are further issues.

Thanks again.

[classicmike]

Hi @tanner-reits,

Thanks for your time in helping out. I've tested the test version that had the slot fixes (4.12.6-dev.1710356530.5aa886e). For that above situation all is good.

Thanks.

However, I would like to reopen the issue because upon further testing. Note I don't know how to repoen an issue so hence the reply here. Anyway another very similar issue has popped up after testing (which the patch given to me does not fix), but the situation was a little different. Not sure if raising a new issue is appropriate or reopening this issue since the new situation is very related, but it's here.

About the new situation

I was testing the content insertion at run time, 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)
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.

[christian-bromann]

Thanks @classicmike for following up on this. Can you do me a favor and raise a new issue for this. It will help us to ingest it into our backlog properly. Thanks a lot!

[classicmike]

Hi @christian-bromann,

I've reported it as a new issue here: #5499

Thanks for your help.