bug: Hydrate SSR Issue – Incorrect order of children elements after renderToString()

[natgerost]

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.9.0

Current Behavior

Stencil's renderToString() function results in the incorrect ordering of elements in the DOM.

Rendering custom components with renderToString()

    <sdx-tabs sr-hint="Tabs with text.">
        <sdx-tabs-item id="tab1" label="Tab 1">This is the content of Tab 1.</sdx-tabs-item>
        <sdx-tabs-item id="tab2" label="Tab 2">This is the content of Tab 2.</sdx-tabs-item>
        <sdx-tabs-item id="tab3" label="Tab 3 >This is the content of Tab 3.</sdx-tabs-item>
        <sdx-tabs-item id="tab4" label="Tab 4">This is the content of Tab 4.</sdx-tabs-item>
        <sdx-tabs-item id="tab5" label="Tab 5">This is the content of Tab 5.</sdx-tabs-item>
        <sdx-tabs-item id="tab6" label="Tab 6">This is the content of the disabled Tab 6.</sdx-tabs-item>
    </sdx-tabs>

results always in this order (Tab6, Tab4 Tab2 ..):

Until client-side hydration occurs, the tabs are displayed in the incorrect order, impacting the visual experience, especially when the ESM script loads slowly.

Upon the client script loading, a repaint operation occurs, which triggers the ”flashing” issue:

Expected Behavior

The order of children should remain as defined before renderToString()

System Info

No response

Steps to Reproduce

Issue can be observed in provided repository, using older version of Stencil. However it was also tested with 4.9.0.

git clone https://gitlab.ost.ch/stencil-ssr-research/basic-setup-with-express/

cd server
npm install
npm run start

Reload the page multiple times to see the "flashing" effect of re-ordering. Or add network throttling to slow down the loading of ESM script.

Code Reproduction URL

https://gitlab.ost.ch/stencil-ssr-research/basic-setup-with-express

Additional Information

Current workaround with CSS-Grid

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues & PRs are properly triaged.

In the meantime, please read our 2023 Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.

Thank you!

[tanner-reits]

Hey @natgerost 👋

I've confirmed the issue and updated the label for this to get ingested into the Stencil backlog. Thanks for reporting!

[christian-bromann]

@natgerost thanks for providing the reproducible example. Unfortunately it doesn't allow me to re-build the project using the latest Stencil version. We have been doing a lot of bug fixes around server side rendering of Stencil components. I would love to validate if this issue still exist with the latest Stencil version. Can you provide something that allows me to reproduce the bug and allowing me to build the project as well?

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[christian-bromann]

@natgerost thanks again for raising this issue. A patch was applied for this bug which will be released as part of Stencil v4.23.0. If you get the chance to verify if these changes resolved the bug, we would appreciated your feedback. Please keep an eye on the release tab as we run this release either today or tomorrow.

[christian-bromann]

A fix for this was released in Stencil v4.23.0