html-template-string documentation

Create a document container
Container is a dom element what has wrapper and then children inside, useful because fragments dont have all dom manipulation possibilities

          
            const container = html`<section onclick="${click_event}" id="container">
                                      <span>element1</span>
                                      <span>element2</span>
                                      <p>Text example</p>
                                   </section>`;

            document.body.appendChild(container);
          
      

Create a SVG element

        
          const circle = html`<svg height="100" width="100">
                                <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                              </svg>`;

          document.body.appendChild(circle);
        
      

Create a Array element

        
          const array = html`<div id="container">
                                ${["data1", "data2", "data3"].map(item => `<span>${item}</span>`).join("")}
                             </div>`

          document.body.appendChild(array);
        
      

Create a embeded Array element

        
          const array2 = html`<div id="container">
                                ${["data1", "data2", "data3"].map(item => html`<span onclick="${click_event}">${item}</span>`)}
                             </div>`

          document.body.appendChild(array2);
        
      

Add one element inside other one

        
          const selection = html`<select onchange="${select_function}">
                                    <option value="1">Value 1</option>
                                    <option value="2">Value 2</option>
                                    <option value="3">Value 3</option>
                                  </select>`

          const selection_container = html`<container id="selection-container">'
                                              <h3 style="color:black">Select your options</h3>
                                              ${selection}
                                           '</container>`

          document.body.appendChild(selection_container);
        
      

Usually you’ll have to provide an outer container that wraps your element. But if you wish to create elements without outer container, you can create a document fragment
Document fragments are elements without a real container Document Fragment
the tag <data-fragment> is only used to differenciate fragments and will not be rendered

        
          const fragment = html`
          <data-fragment>
            <span class="example1" onclick="${click_event}"><strong>Click me!</strong></span>
            <span class="example2">Element2</span>
            <span class="example3">Element3</span>
          </data-fragment>`;

          document.body.appendChild(fragment);