ISML to lit-html

Question

I'm having difficulties with rewriting ISML-Templates to lit-html.

eg

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

How does the isml tag <isset> work for lit-html?

Answer 1

Lit-html speaks regular HTML. You can define any custom element you want, but <isset> is neither a standard nor a custom element. Meaning, <isset> element doesn't work with lit-html per-se , rather, lit-html takes your template and updates the DOM efficiently with it. If you have some other code on the page which is parsing the rendered <isset> elements, that's fine, you can use lit-html to render them.

lit-html will render nodes as you write them, although it will transform that self-closing tag to a normal tag.

 (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>

Rendered output:

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