Comment by agumonkey

3 years ago

Good point, but it's very different in terms of thinking. Same as structural versus string macros in programming languages.

You can do it with custom elements, e.g.

      <dom-calc>
        const p = document.createElement('button');
        p.innerText = 'hi';
        p.onclick = () => alert('hi');
        return p;
      </dom-calc>

For something like:

  class CalcElement extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        const fn = new Function(this.innerText);
        this.replaceWith(fn());
      }, 0);
    }
  }

  customElements.define('dom-calc', CalcElement);