无法使用lit-html的动态代码吗？

Question

谁能告诉我为什么我不能在lit-html的html方法中使用变量？

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

如果我将${h1}替换为h1则没有问题。

Answer 1

对于对我的解决方案感兴趣的所有人：如果可以，请使用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)}
    `;

Answer 2

lit-html不允许使用动态标签名称的原因是，lit-html的工作原理是用特殊标记替换表达式，然后用结果创建HTML <template>元素。

关键，略微微妙的部分是它确实not使用值来创建模板。它们被插入模板after中，模板被克隆，这是在HTML被解析之后。无法进入DOM树并更改一个元素的标签名称。我们必须删除元素，替换它，设置所有绑定，并将所有子代移到新元素中。这将非常昂贵。

我们确实有计划支持静态绑定（一旦我们可以放弃对不能正确实现模板文字的较早版本的Edge浏览器的支持），就可以内插之前创建HTML <template>，这将允许使用标签名称的表达式。静态绑定无法用新数据更新，但是-模板创建时的值是唯一使用的值。