<template id="my-template">
  <p><slot name="my-slot">I'm a placeholder.</slot></p>
</template>
<my-template>
  <span slot="my-slot">I'm the slot's content! Find my slot.</span>
</my-template>

body {
  margin: 10px;
  color: black;
  font-family: 'Google Sans', sans-serif;
}

customElements.define('my-template',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('my-template');
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  }
);