lit-html是否不支持动态标签？为何无法在其html方法中用变量作标签？

嘿，这个问题我之前也踩过坑！其实核心原因是lit-html的模板语法是静态优先设计的——它会在编译阶段提前分析模板的结构，所以你直接用${h1}这种方式插值标签名的话，lit-html会把变量的值当成普通文本内容处理，而不是解析成HTML标签，这就是硬编码h1正常、用变量就不行的关键所在。

那要实现动态标签该怎么做？给你两个实用方案：

方案1：用unsafeHTML快速实现（适合简单场景） #

你可以用lit-html提供的unsafeHTML指令，把包含动态标签的完整HTML片段渲染出来，代码示例：

import { html, unsafeHTML } from 'lit-html';

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

⚠️ 划重点：unsafeHTML会直接渲染传入的HTML字符串，所以一定要保证h1和classes的内容是安全可信的，别让用户输入的内容混进来，不然会有XSS风险哦。

方案2：用条件判断/映射（更安全，适合有限标签选项） #

如果你的动态标签只有固定几种可能（比如h1/h2/h3/div），强烈推荐这种方式，安全又可控：
比如用switch判断：

import { html } from 'lit-html';

const tagName = 'h1'; // 可选值：h1、h2、h3等

switch(tagName) {
  case 'h1':
    return html`<h1 class="a-heading ${classes}"><slot></slot></h1>`;
  case 'h2':
    return html`<h2 class="a-heading ${classes}"><slot></slot></h2>`;
  // 其他标签的情况...
  default:
    return html`<div class="a-heading ${classes}"><slot></slot></div>`;
}

或者用对象映射更简洁：

import { html } from 'lit-html';

const tagMap = {
  h1: (classes) => html`<h1 class="a-heading ${classes}"><slot></slot></h1>`,
  h2: (classes) => html`<h2 class="a-heading ${classes}"><slot></slot></h2>`,
  div: (classes) => html`<div class="a-heading ${classes}"><slot></slot></div>`,
};

const tagName = 'h1';
// 找不到对应标签就用div兜底
return tagMap[tagName]?.(classes) || tagMap.div(classes);

这种方式所有标签都是你预先定义好的，lit-html能正常做静态分析和安全处理，完全不用担心XSS问题。

内容的提问来源于stack exchange，提问作者codepleb