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 template = `
      <h${this.rank} class="a-heading">
        <slot></slot>
      </h${this.rank}>
    `;

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

Answer 2

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

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

我们确实有计划支持静态绑定（一旦我们可以放弃对未正确实现模板文字的旧版 Edge 浏览器的支持），这些绑定会在创建 HTML <template>，这将允许使用表达式作为标记名称。但是，静态绑定不能用新数据更新 - 模板创建时的值是唯一使用的值。

lit-html 的动态标签不可能吗？

Dynamic tags for lit-html not possible?

javascript

web-component

custom-element

lit-element

lit-html