bug: serializeShadowRoot: 'scoped' does not apply scoped classes to host element children

[Armand-Lluka]

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

Current Behavior

When using renderToString to hydrate scoped web components, the "scoped" classes are not being applied correctly to the children of the host element.

Expected Behavior

When using renderToString with serializeShadowRoot: 'scoped', the children of the host element should properly have the sc-web-component-name class applied and all the defined styles that come with it.

System Info

System: node 20.18.3
Platform: darwin (24.3.0)
CPU Model: Apple M1 Pro (8 cpus)
Compiler: stencil-bug-reproduction/node_modules/@stencil/core/compiler/stencil.js
Build: 1741890846
Stencil: 4.28.2 🎤
TypeScript: 5.5.4
Rollup: 4.34.9
Parse5: 7.2.1
jQuery: 4.0.0-pre
Terser: 5.37.0

Steps to Reproduce

Go to: https://github.com/Armand-Lluka/stencil-bug-reproductions/tree/scoped-styling-bug-demo

1. npm i
2. npm run build
3. npm run serve to spin up server
4. Visit http://localhost:8090/
5. Disable JS on the client and notice that classes and styles are not being properly applied.
6. If you add the class manually, sc-my-component, to the child of the host element, then the styles are again properly applied.

Code Reproduction URL

https://github.com/Armand-Lluka/stencil-bug-reproductions

Additional Information

[Armand-Lluka]

This was not fixed with #6224 I've updated Stencil to the latest version in the example to demonstrate this.

[christian-bromann]

I've raised a PR with a fix at #6237