<template id="$template">
  <span>
    A Template
  </span>
    <style>
      :host{
        border: 1px solid black;
      }
    span {
      color: blue;
      font-size: 30px;
    }
  </style>
</template>
<my-element></my-element>
class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "closed" });
    const tplEle = document.getElementById("$template");
    const content = tplEle.content.cloneNode(true);
    shadow.appendChild(content);
  }
}
window.customElements.define("my-element", MyElement);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.