web-components.html

<!-- Template definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div class="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<script>
   customElements.define('fancy-element', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
      const t = document.querySelector('#fancy-element-template');
      const instance = t.content.cloneNode(true);
      shadowRoot.appendChild(instance);
    }
   })
</script>