
    <div id="host">
      <div class="counted" slot="content3">Three</div>
      <div class="counted" slot="content2">Two</div>
      <div class="counted" slot="content1">One</div>
    </div>

    <script>
      const shadowRoot = document
          .getElementById('host')
          .attachShadow({mode: 'open'});
      shadowRoot.innerHTML = `
      <div>
        <slot name="content1"></slot>
        <slot name="content2"></slot>
        <slot name="content3"></slot>
      </div>
      `;
    </script>

  