Lit-Element：如何渲染含动态表达式的外部文本模板？

问题原因 #

• unsafeHTML()仅负责将字符串作为HTML内容渲染，不会解析或执行其中的JavaScript模板表达式，${new Date()}会被当作普通文本输出。
• unsafeStatic()是编译时生效的静态模板处理工具，仅适用于编译阶段就能确定的固定字符串，动态从外部获取的模板无法触发它的编译逻辑，自然也不会执行表达式。

解决方案 #

要实现表达式求值，需要手动提取模板中的${}表达式并执行，再将结果替换回模板后渲染。注意：此方法会执行外部传入的JavaScript代码，必须确保模板来源完全可信，避免代码注入风险。

基础实现 #

import { html } from 'lit';
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { customElement, LitElement } from 'lit-element';

@customElement('my-component')
export class MyComponent extends LitElement {
  templ = "<div>${new Date()}</div>";

  render() {
    const evaluatedHtml = this.evaluateTemplate(this.templ);
    return html`${unsafeHTML(evaluatedHtml)}`;
  }

  evaluateTemplate(templateStr) {
    return templateStr.replace(/\${(.*?)}/g, (match, expr) => {
      try {
        // 动态执行表达式
        return new Function(`return ${expr};`)();
      } catch (e) {
        console.error('表达式求值失败:', e);
        return match; // 求值失败时保留原表达式
      }
    });
  }
}

支持组件上下文 #

如果模板表达式需要访问组件实例的属性或方法，可以将组件上下文传入求值函数：

// 修改evaluateTemplate方法
evaluateTemplate(templateStr) {
  return templateStr.replace(/\${(.*?)}/g, (match, expr) => {
    try {
      // 将组件实例作为this上下文执行表达式
      return new Function(`return ${expr};`).call(this);
    } catch (e) {
      console.error('表达式求值失败:', e);
      return match;
    }
  });
}

此时模板中可以使用${this.myProperty}这类依赖组件实例的表达式。

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