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

谁能告诉我为什么我不能在 list-html 中使用变量html method?

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

如果我更换${h1} with h1工作没有问题。

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

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

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