load TEMPLATE by Id

by WebComponents

HTML

<template id="MY-COMPONENT">
  <style>
    button { background:green }
  </style>
  <button part="button">
    <slot></slot>
  </button>
</template>

<my-component>Open</my-component>
<my-component>Close</my-component>

<style>
  *::part(button) {
    color: gold;
  }
</style>

<script>
  customElements.define('my-component', class extends HTMLElement {
    constructor() {
      const template = (id) => document.getElementById(id).content.cloneNode(true);
      super().attachShadow({mode:'open'}).append(template(this.nodeName));
    }
  });
</script>