JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<template id="header-template">
  <h1>Hello!</h1>
</template>

<heading-element></heading-element>

JavaScript

class HeadingElement extends HTMLElement {
  constructor() {
    super();
    this.content = this.attachShadow({
      mode: 'closed'
    });
  }

  render() {
    this.template = document.querySelector('template#header-template');
    this.content.appendChild(this.template.content.cloneNode(true));
  }
}

customElements.define('heading-element', HeadingElement);
document.querySelector('heading-element').render();