[HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components

<script>
    const templateString = `
    <div>Some text</div>
    <form>
        <input name="test"/>
    </form>
    <slot name="slot1"></slot>
    `;
    const template = document.createElement(‘template‘);
    template.innerHTML = templateString;
    class MyWebComponent extends HTMLElement {
        constructor() {
            super();
        }

        connectedCallback() {
            this.appendChild(template.content.cloneNode(true));
        }
    }
    window.customElements.define(‘custom-element‘, MyWebComponent);
</script>
<custom-element>
    <p slot="slot1">This is a slotted paragraph</p>
</custom-element>
<custom-element>
    <iframe slot="slot1" width="560" height="315" src="https://www.youtube.com/embed/Bv_5Zv5c-Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</custom-element>