Discussion on: Template Literal expressions within the Template tag seem like a missed opportunity

[Heiker]

My goal here is to write a JS component which contains no markup, but takes the markup it needs from the DOM.

Oh I get it now. Nothing "lightweight" comes to mind.

I guess the closest thing that you could do with lit-html is evaluate the template somehow.

Don't do this at home.

<div id="app"></div>

<template id="test-template">
    hello ${data.name}
</template>

<script>
  import {html, render} from 'https://unpkg.com/lit-html?module';

  var generator = function(string) {
    var fn = new Function(
      'html',
      'data',
      `return html\`${string}\`;`
    );

    return fn.bind(null, html);
  };

  var template = document.getElementById('test-template');
  var helloComponent = generator(template.content.textContent);

  render(
    helloComponent({name: 'world'}),
    document.getElementById('app')
  );
</script>