LitElement appending custom elements using button

Question

I have a custom LitElement and inside it, I need to have a button that will dynamically append new custom elements (preferably using TemplateResult objects generated by html function) inside a container:

import { LitElement, html, render } from "lit";
import { customElement } from "lit/decorators.js";

    @customElement('example-custom-component')
    class CustomComponent extends LitElement {

       render() {
          return html`
             <div id="custom-el-container">
             </div>
             <button @click=${this.appendNewCustomEl}>click me!</button>
          `;
       }

       appendNewCustomEl() {
          const templateToAppend = html`
            <another-custom-component>
               some other things added here
            </another-custom-component>
          `;
          render(templateToAppend, this.shadowRoot?.querySelector('#custom-el-container'));
       }
    }

As you can see above I tried to achieve it by using the render function, but instead of appending it at the end of the container, I'm simply overwriting the content of the div. What am I doing wrong? What's the best approach to achieve those results? Please help.

EDIT: New example for my question from comments about click events:

appendNewCustomEl() {
  this.shadowRoot!.querySelector('#custom-el-container').insertAdjacentHTML("beforeend", `
            <another-custom-component>
               <button @click=${this.functionFromCustomComponent}>click me!</button>
            </another-custom-component>
          `)
}

Answer 1

If you really want to do it with lit-html and your container's content is purely what you are dynamically rendering on each button click, (i.e. not server side rendered content) or you are using lit-html v2 then you could have a list and track what you have rendered. something like:

items=[];

appendNewCustomEl() {
  this.items.push(null);
  const templatesToAppend = this.items.map(() => html`
            <another-custom-component>
               some other things added here
            </another-custom-component>
          `);
   render(templatesToAppend, this.shadowRoot?.querySelector('#custom-el-container'));
}

in general what lit-html is good at and tries to achieve is an optimal re-render of markup when only parts are changed. not necessary a template engine alternative to handlebars, mustache and co.

In your example, you don't need it and could do it simply without lit-html:

appendNewCustomEl() {
  this.shadowRoot!.querySelector('#custom-el-container').insertAdjacentHTML("beforeend", `
            <another-custom-component>
               some other things added here
            </another-custom-component>
          `)
}

Answer 2

I've slightly modified your example code to be more idiomatic Lit. Instead of using a querySelector and insertAdjacentHTML, it is preferred to render the array of templates declaratively. This has the added benefit that your functionFromCustomComponent event bindings "just work".

I've written the full example in a Lit playground.

The list of templates are stored in a reactive property, this.templates that schedules an efficient update whenever the list is updated.

Then the this.appendNewCustomEl method can push new templates to the list, and an automatic efficient render happens automatically.

this.templates is rendered into the #custom-el-container div using an expression:

<div id="custom-el-container">
  ${this.templates}
</div>

See Lit expressions documentation for other examples.

In my linked example, the list of templates turn blue when clicked to demonstrate the event working.

Not necessary but related, Lit.dev has a tutorial all about Working with lists that goes much more in depth if you're curious.