Add a test to render a <template>'s contents

[bahrus]

I'm working on a project where we integrate web components into a web application using the preact framework. For the most part, the issues this site have raised have proven applicable and been very helpful in steering the way we design the application.

One aspect that took me by surprise, though, is that there may be an issue when a custom element uses template tags in the light children area. In particular, I encountered issues with the Vaadin Grid, which uses inner templates to define the columns. Something seemed to go wrong in the way the JSX/h engine generated these teplate tags.

It's a little hard to explain what I was seeing. It was like the template tags weren't quite inert, and the inside of the template turned into strings. Or something. I do think there's an issue here.

[robdodson]

Hm interesting. @developit any idea what could be going on there?

[jogibear9988]

maybe it's a similar problem like I mentioned in #272

[robdodson]

If someone can give me a code snippet of what doesn't work that would be helpful. I would prefer if the snippet did not rely on using a polymer element like iron-list to demonstrate the concept, but could be instead demonstrated just using vanilla web components.

[developit]

I believe @jogibear9988 is correct, and this likely affects nearly all of the libraries here that don't include logic for working with <template>. In particular, Virtual DOM libraries append any JSXText/String literal values using parent.appendChild(document.createTextNode(value)), which bypasses the built-in behavior of template entirely.

Here's a stripped down example of the difference, and why it doesn't work: http://jsfiddle.net/developit/y8urh2ax/

FWIW in JSX you can do this:

<template dangerouslySetInnerHTML={{ __html: `
  <h1>hello world</h1>
  <p>this gets set via .innerHTML, so it is inert and populates template.content</p>
` }} />

[robdodson]

So if I had something like...

<x-foo>
  #shadow-root
    <div>[template.content goes here]</div>
  <template>
    <div>Hello World</div>
  </template>
</x-foo>

And my custom element grabbed template.content to populate that div in the shadow root, it would break in VDOM libraries?

[robrez]

angular has problems w/ slotting templates, too

https://github.com/angular/angular/issues/15557

[robdodson]

Thanks @robrez, I recall seeing this issue before but thought they had already fixed it.

Definitely sounds like adding a test for <template> in the light dom would be good. Is anyone interested in putting together a PR to help with that? 🙏

[stephantabor]

Vue also does not handle <template> well

https://github.com/vuejs/vue/issues/9427

[keithamus]

Likewise React, https://github.com/facebook/react/issues/19932