Dynami c теги для подсветки - html не возможно?

Question

Может кто-нибудь сказать мне, почему я не могу использовать переменные в методе lit- html html?

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

Если я заменю ${h1} на h1, который работает без проблем.

Answer 1

Причина, по которой lit-html не допускает использование динамических имен тегов c, заключается в том, что lit- html работает, заменяя выражения специальными маркерами, а затем создает элемент HTML <template> с результатом.

Ключевая и слегка тонкая часть здесь в том, что она не использует значения для создания шаблона. Они интерполируются в шаблон после , когда шаблон клонируется, то есть после анализа HTML. Нет способа go в дерево DOM и изменить имя тега одного элемента. Нам пришлось бы удалить элемент, заменить его, настроить любые привязки и переместить всех потомков в новый элемент. Это было бы очень дорого.

У нас есть планы по поддержке привязок stati c (как только мы можем отказаться от поддержки старых браузеров Edge, которые не совсем правильно реализуют литералы шаблонов), которые интерполируются ранее создание HTML <template>, что позволило бы использовать выражения для имен тегов. Однако привязки Stati c не будут обновляться новыми данными - единственное используемое значение - значение во время создания шаблона.

Answer 2

Для всех, кто интересуется моим решением: используйте unsafeHTML, если можете (вы не должны этого делать, если оберните любые поля ввода внутри).

    import { unsafeHTML } from 'lit-html/directives/unsafe-html';
    // ...
    const secondaryVariant =
      this.variant === 'secondary' ? 'a-heading--secondary' : '';

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

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