ISML to lit-html

Question

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

e.g.

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