bug: nuxt / vue hydration errors during v-for with SSR shadow: true components

[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

Vue places comment nodes (<!-- [ --> / <!-- ] -->) to mark the start and end position of it's for loops.

Stencil shadow: true components strip out comment nodes during client side hydration after SSR, breaking Vue's hydration.

Expected Behavior

Like scoped: true components, Stencil should retain comment nodes (in the same order they were originally placed).

System Info

Steps to Reproduce

https://github.com/johnjenkins/nuxt-stencil-testing

pnpm i
cd packages/stencil-components
pnpm build
cd ../nuxt-test
pnpm dev

There are 2 components used, one scoped: true and one shadow: true, both utilising vue's for loops.

The shadow component will throw a hydration error.

Code Reproduction URL

https://github.com/johnjenkins/nuxt-stencil-testing

Additional Information

No response

[christian-bromann]

This has been released in @stencil/[email protected]