Nested Slots render children components in the wrong order 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

Current Behavior

I'm doing some prototyping where I have Stencil components to load in to Seek Playroom (Design Tool using existing components: https://github.com/seek-oss/playroom), using the generated React components from ReactOutputTarget.

I have a minimum reproducible repo that you can use to run your tests to confirm the bug, which is here: https://github.com/classicmike/stencil-slot-test.git

The end goal is I want to be able to enter code in the code editor and Playroom will render the final generated output for me to be able to preview the content with children elements rendered in the correct order. See screenshot below. Currently this works perfectly fine when I enter the code and reload the page.

The problem actually comes in when we add multiple stencil components nested inside a parent stencil component on the fly at runtime like so:

<TestContainer>
    <TestBtn>Some button 1</TestBtn>
    <TestBtn>Some button 2</TestBtn>
</TestContainer>

Both TestContainer and TestBtn have <slot> to render their children and have scoped: true.

What happens is the children components that get instantiated and rendered will appear in reverse order. See screenshot below:
.

Please look at the code editor at the bottom of the screen and the result and you'll probably understand.

Further investigation so far has revealed that this issue happens mainly on using the Stencil components with slots as a parent element and do not happen when using plain HTML tags such as a div. Please see below:

More investigation revealed, that it seems like this issue was introduced after doing a the introduction of adding experimentalSlotFixes: true to resolve very similar issue I had with the following Github issue: React fails to manage children in Stencil · Issue #2259 · ionic-team/stencil · GitHub.

Without the experimentalSlotFixes: true, writing the same markup renders the children in their correct order, like the screen shot below:

Remember all of these scenarios I am testing for is when these new components are added and rendered dynamically at runtime.

Unfortuantely, I need the experimentalSlotFixes: true in order for my buttons inside of TestBtn to render correctly.

Expected Behavior

The end goal is I want to be able to enter code in the code editor and Playroom will render the final generated output for me to be able to preview the content with children elements rendered in the correct order. See screenshot below. Currently this works perfectly fine when I enter the code and reload the page.

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: 1709576313
     Stencil: 4.12.5 💙
  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. Clone the following repo: https://github.com/classicmike/stencil-slot-test.git
2. cd stencil-slot-test
3. Run npm install
4. Build stencil library by running cd packages/stencil-library from the root directory and npm run build
5. Build react library by running cd packages/react-library from the root directory and npm run build
6. Initialise Play room by running cd packages/stencil-library-playroom from the root directory and run npm run playroom:start
7. Once the UI has loaded, write the following markup below character by character. Do not copy and paste.

<TestContainer>
  <TestBtn>Test Btn 1</TestBtn>
  <TestBtn>This should be AFTER 'TEST BUTTON 1'</TestBtn>
</TestContainer>

If instructions done as above, the you will see the bug as shown below:

.

Note: If you decide to reload the page, since it uses some form of local storage I believe, the code that was previously written on the screen will be loaded in and everything will work fine. To replicate the issue again after reloading the page, delete all content in the code editor and rewrite it again.

Code Reproduction URL

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

Additional Information

No response

[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/core@4.12.6-dev.1710356530.5aa886e.

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.