Dynamic tags for lit-html not possible?

Question

Can anyone tell me why I cannot use variables within lit-html's html method?

const h1 = 'h1';
return html`
  <${h1} class="a-heading ${classes}">
    <slot></slot>
  </${h1}>
`;

If I replace ${h1} with h1 that works without problems.

Answer 1

The reason lit-html doesn't allow for dynamic tag names is that lit-html works by replacing the expressions with special markers and then creating an HTML <template> element with the result.

The key, and slightly subtle, part here is that it does not use the values to create the template. They are interpolated into the template after the template is cloned, which is after the HTML has ben parsed. There's no way to go into a tree of DOM and change the tag name of one element. We'd have to remove the element, replace it, set up any bindings, and move any children into the new element. This would be very expensive.

We do have plans to support static bindings (once we can drop support for older Edge browsers that don't implement template literals quite correctly) which are interpolated before creating the HTML <template>, which would allow for using expressions for tag names. Static bindings would not be updatable with new data however - the value at template creation time is the only value used.

Answer 2

For everyone interested in my solution: Use unsafeHTML if you can (you should not do that if you wrap any input fields within).

    import { unsafeHTML } from 'lit-html/directives/unsafe-html';
   
     // ...

    const template = `
      <h${this.rank} class="a-heading">
        <slot></slot>
      </h${this.rank}>
    `;

    return html`
      ${unsafeHTML(template)}
    `;