title: LitElement appending custom elements using button
body: <p>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:</p>
  <pre><code>import { LitElement, html, render } from &quot;lit&quot;;
  import { customElement } from &quot;lit/decorators.js&quot;;
  
      @customElement('example-custom-component')
      class CustomComponent extends LitElement {
  
         render() {
            return html`
               &lt;div id=&quot;custom-el-container&quot;&gt;
               &lt;/div&gt;
               &lt;button @click=${this.appendNewCustomEl}&gt;click me!&lt;/button&gt;
            `;
         }
  
         appendNewCustomEl() {
            const templateToAppend = html`
              &lt;another-custom-component&gt;
                 some other things added here
              &lt;/another-custom-component&gt;
            `;
            render(templateToAppend, this.shadowRoot?.querySelector('#custom-el-container'));
         }
      }
  </code></pre>
  <p>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.</p>
  <p>EDIT:
  New example for my question from comments about click events:</p>
  <pre><code>appendNewCustomEl() {
    this.shadowRoot!.querySelector('#custom-el-container').insertAdjacentHTML(&quot;beforeend&quot;, `
              &lt;another-custom-component&gt;
                 &lt;button @click=${this.functionFromCustomComponent}&gt;click me!&lt;/button&gt;
              &lt;/another-custom-component&gt;
            `)
  }
  </code></pre>