lit-html - ISML 到 lit-html

Question

我在将 ISML 模板重写为 lit-html 时遇到了困难。

例如

<isset name="Variable" value="${pdict.variable}" scope="page" />

isml 标签如何<isset>用于 lit-html？

Answer 1

Lit-html 使用常规的 HTML。您可以定义任何您想要的自定义元素，但<isset>既不是标准元素也不是自定义元素。意思是，<isset>element 不适用于 lit-html per-se，而是 lit-html 获取您的模板并使用它有效地更新 DOM。如果页面上有一些其他代码正在解析呈现的<isset>元素，那很好，您可以使用 lit-html 来呈现它们。

lit-html 将在您编写节点时呈现节点，尽管它会将自闭合标签转换为普通标签。

(async function() {

  const { render, html } = await import("https://unpkg.com/lit?module");

  function issets(items) {
    return items.map(({ name, value }) => html`<isset name="${name}" value="${value}"/>`);
  }
  
  render(issets([
    { name: 'a', value: 1 },
    { name: 'b', value: 2 }
  ]), document.querySelector('output'));
  
  console.log(document.querySelector('output').innerHTML)
  
})();

<output></output>

渲染输出：

<!----><!----><isset name="a" value="1"></isset><!----><!----><isset name="b" value="2"></isset><!---->