bug: ssr. Incorrect slotted node order with serializeShadowRoot: 'scoped'

[johnjenkins]

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

latest

Current Behavior

When slotted nodes are nested in 2 (or more) components deep and rendered via serializeShadowRoot: 'scoped' the original node order will be lost; instead taking the order of the <slot /> elements within the component.
Visually, this doesn't impact anything however it can cause hydration errors in meta frameworks (e.g. nuxt / next etc).

Given the following outer markup:

<cmp-parent>
  <cmp-child>
    <p slot="two">Slot 2</p> <!-- should be first in the final dom  --!>
    <p slot="one">Slot 1</p>  <!-- should be second in final dom  --!>
  </cmp-child>
</cmp-parent>

returns the following:

pay special attention to

<!--o.0.5.-->
<!--o.0.7.-->
...
<p c-id="0.7" slot="one">Slot 1</p>
<p c-id="0.5" slot="two">Slot 2</p>

The comments match the slotted nodes and represent the original order of the nodes: 5 first, 7 second.

However the final result shows slot 'one' is first and 'two' second - not the order they were originally

Expected Behavior

The original order should be preserved in the final hydrated DOM

System Info

Steps to Reproduce

pnpm i
pnpm build
pnpm express

Code Reproduction URL

https://github.com/johnjenkins/stencil-start-m6opf9rg

Additional Information

No response