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>元素不適用於 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>

渲染 output：

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