Template tags don't compile into a proper DocumentFragment

[bitingmidge]

Stencil version:

 @stencil/core@0.14.1

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When using a <template> tag inside of a component, the template's content gets created as a a sibling of the #document-fragment instead of as a child. As a result, you cannot attach the <template> content somewhere else in the DOM.

Below is a console screenshot of what (1) the <template> object should look like and (2) what it looks like in the component that Stencil has compiled.

Expected behavior:

The content inside of a <template> tag doesn't get rendered to the screen but instead creates a DocumentFragment that can be attached elsewhere in the DOM using javascript. This would allow you to create some content inside of a component that could then be dynamically rendered somewhere else in the DOM outside of the component. Sort of the opposite idea of passing in dynamic content and placing it using a <slot> tag in your JSX.

Steps to reproduce:

• Clone https://github.com/bitingmidge/stencil-template-tag-issue.git
• npm start

The result will be:

• A grey block of standard component content (nothing special here, this works as you would expect)
• There should be a yellow block of content next but it isn't there because of the bug
• A cyan block of content that is coming from a <template> tag in the index.html file (just to prove that it can work when the DocumentFragment is formed properly).

To monkey patch it:

• Inside of https://github.com/bitingmidge/stencil-template-tag-issue/blob/master/src/components/template-tag-issue/template-tag-issue.tsx comment out line 17 to run a quick fix up.
• You should now see the yellow block of content rendered correctly

Related code:
This is the monkey patch that just makes a rough copy of the sibling node and copies it as a child node of the DocumentFragment:

_fixupTemplate() {
    var frag: DocumentFragment = this.template.content
    frag.appendChild(this.template.firstChild.cloneNode(true))
  }

Other information:

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!