bug: first <template> element on root index page is malformed

[nwhittaker]

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

Current Behavior

On the root index.html page, the first <template> element appears to be replaced by its shadow root -- or is collapsed with its parent element in some way.

Expected Behavior

The first <template> element appears in the DOM the same as the other <template> elements.

System Info

System: node 20.17.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: ~/stencil-component/node_modules/@stencil/core/compiler/stencil.js
       Build: 1724698030
     Stencil: 4.21.0 🐷
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

1. Checkout the GitHub repo and switch to the @stencil-core/index-template-el branch.
2. Run npm i and npm start.
3. Visit http://localhost:3333/ in Chrome.
4. Open Chrome's devtools and inspect the DOM to see the <template> elements.

Code Reproduction URL

https://github.com/nwhittaker/stencil-component

Additional Information

Possibly related to #5979.

[christian-bromann]

Thanks for raising the issue and providing a reproduction case. Our team is currently battling a lot of competing priorities so we can't say for sure when we will be able to look into this. If you have capacities available we would appreciate a pull request with a fix to this. Thanks a lot!