Is there a way to make tags in lit-html templates dynamic?

Question

Question is pretty much self-explanatory.

Example:

function generateTemplate(tag) {
  return html`
    <${tag}
      .some-prop=${1}
    >
      ...
    </${tag}>
  `;
}

Polyphyletic

Related issues in lit-html repo: github.com/Polymer/lit-html/issues/217 – Denbighshire

Does this answer your question? Dynamic tags for lit-html not possible? – Providential

Answer 1

There isn't one way to do specifically what you mention here, but there are two approaches that can get you somewhat close:

• Conditional rendering

const template = tag => { 
  if (tag === 'custom-component') {
    return html`<custom-component></custom-component>`;
  } else if (tag === 'other-component') {
    return html`...`;
  } else {
    return html`<some-default></some-default>`;
  }
};

• Using the unsafe html directive

import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
const template = unsafeContent => {
  // bear in mind that this should only be done after sanitizing the content
  return html`${unsafeHTML(unsafeContent)}`;
};
template('<my-component>Some content</my-component>');

Pelkey

Yeah, was already doing the same thing as conditional rendering via switch cases but there's just too many and it's basically the same properties for each anyway. Could probably work with the unsafeHTML directive but need to sanitize the items set to the props like you said. Hmm. – Polyphyletic