bug: cannot clone contents of rendered`<template>` elements

[nwhittaker]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.21.0

Current Behavior

When rendering a <template> element inside a component, the template's subtree is appended to the <template> element. As a result, it is not possible to clone the template's contents with the standard approach of cloning its content document fragment^1.

const contentClone = someTemplateElement.content.cloneNode(true);

In the rendered DOM, you can see the template's child node is a sibling to the template's document fragment instead of contained within the fragment:

Expected Behavior

The content document fragment can be cloned with the usual caveats around event handlers still applying. In the rendered DOM, the template's subtree is instead appended to the template's content document fragment:

System Info

System: node 20.17.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M1 Max (10 cpus)
    Compiler: ~/sandbox/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. Clone https://github.com/nwhittaker/stencil-component.git
2. Check out the @stencil-core/component-template-el branch
3. Run npm i
4. Run npm start
5. Use dev tools to inspect the <template> element within the <my-component> shadow-root.

Code Reproduction URL

https://github.com/nwhittaker/stencil-component/tree/%40stencil-core/component-template-el

Additional Information

Older, related issue: https://github.com/ionic-team/stencil/issues/1169.