0

I'm currently experimenting with LitElement which uses lit-html. lit-html would like the content to be provided as such:

html`Content goes here ${variable} <button on-click="${(e) => myEvent()}"`

I am able to import the template using raw-loader, html-loader, even es6-template-string-loader. I'm unable to provide this to the HTML function in the right format.

html is a function than takes an array of strings and values. Using the tagged syntax takes care of the splitting of the strings and the variables for you.

My question is, how could I dynamically provide the html function the imported template, or how would I take care of the splitting of the template myself?

Edit: Just to be clear I'm not trying to convert a string to a template literal. I am trying to provide a template literal to a tagged function dynamically. Using the

tag`${templateLiteral}`

syntax stores the content in one variable, and will not work. Using the

tag(templateLiteral)

syntax is not correct, because the tag function expects tag(array of strings, ...values).

  • A loaded file is just going to be a string, so this should be covered by the duplicate. – loganfsmyth May 10 '18 at 18:23
  • Using es6-template-string-loader, this is not the case. The issue that I am having is not how to convert a string to a template literal, but how to provide the literal to a tagged function. Even without importing, I'm asking how I would store a template literal, and then provide it to a tagged function dynamically. Please un-duplicate. – Andrew Noblet May 10 '18 at 18:25

1 Answers1

0

If I understand you correctly you want to have multiple templates, right? What you can do is something like this:

render() {
const differentTemplate = html`<p>Hello world!</p>`;
return html`Content goes here ${differentTemplate} 
<button @click="${(e) => myEvent()}>Click me</button>`;
}

Since html just returns TemplateResult you can nest them into each other too.

Also be aware that your event binding is wrong. I fixed it in the example.

Christian S.
  • 295
  • 1
  • 2
  • 12