First Variant(incorrect):  document.write('&lt;tag-1>aa&lt;tag-2> TAG2 &lt;/tag-2>bb&lt;/tag-1>')<br>

<script>

    class tag1 extends HTMLElement{

         connectedCallback(){this.innerHTML='xx' }

    }

    class tag2 extends HTMLElement{

         connectedCallback(){}

    }

    customElements.define('tag-1', tag1);

    customElements.define('tag-2', tag2);   

    document.write('<tag-1 >aa<tag-2> TAG2 </tag-2>bb</tag-1>');    

</script>

​

​

<br><br>Second Variant(incorrect)- in html: &lt;tag-1>aa&lt;tag-2> TAG2 &lt;/tag-2>bb&lt;/tag-1><br>

<tag-1>aa<tag-2> TAG2 </tag-2>bb</tag-1>

​

<br><br>Third Variant(correct)  div.innerHTML='&lt;tag-1>aa&lt;tag-2> TAG2 &lt;/tag-2>bb&lt;/tag-1>';<br>

<div id='div'></div>

​

<script>

    div.innerHTML='<tag-1>aa<tag-2> TAG2 </tag-2>bb</tag-1>';   

    document.write('<br>Four: <tag-1 >aa<tag-2> TAG2 </tag-2>bb</tag-1>');

</script>

​