Nested slots mis-ordered when not using Shadow DOM

[Paul-Hebert]

Stencil version:

 @stencil/core@2.0.1

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When a parent component's template contains a child component which it passes its slot content into, the slot content can end up mis-ordered compared to the child component's template. I believe the child component's props being based on the parent component's state may be related to the issue.

For example, in my use case "State: true" should come before "Hello" but it ends up backwards. (code examples below)

Hello

State: true

If the components re-render, or I turn on Shadow DOM, that fixes the issue (turning on Shadow DOM will not work for my real-world use case)

Expected behavior:

I would expect the order of the text above to be swapped:

State: true

Hello

Steps to reproduce:

Here is a demo and reproduction repo:

• Demo
• Minimum reproducible test case repo

Related code:

Here are two components I used for a minimum reproducible test case:

Parent component:

import { Component,  h, Host } from '@stencil/core';

@Component({
  tag: 'my-component',
})
export class MyComponent {
  render() {
    return <Host>
      <div>
        <nested-component state={true}>
          <slot />
        </nested-component>
      </div>
    </Host>;
  }
}

Nested Component

import { Component, Host, Prop, h } from '@stencil/core';

@Component({
  tag: 'nested-component',
})
export class NestedComponent {
  @Prop() state: boolean;

  render() {
    return (
      <Host>
        <div>State: {this.state.toString()}</div>
        <slot />
      </Host>
    );
  }
}

Here's how I'm using this component:

<my-component>
  <p>Hello</p>
</my-component>

Other information:

#2232 sounds related, but not quite the same. That issue deals with issues on re-renders. My issue is with the initial render.

[tkayali]

Hi - I'm running into this exact issue as well. Hope the team has time to look at the fixing PR soon!!

[rwaskiewicz]

Hey there 👋

Thanks for the detailed summary and minimal reproduction! They make verifying issues so easy and are very much appreciated! I've confirmed this is a bug still in Stencil v2.10.0, and am going to label this issue so it gets ingested for the team to look at further. Thanks again!

[Paul-Hebert]

Awesome, thanks @rwaskiewicz !

[rwaskiewicz]

The fix for this issue has been released as a part of today's Stencil v4.7.0 release. Should the issue reappear, please feel free to open a new ticket. Thanks!