JSFiddle - React, Tailwind, and code Playground

by Abhishek Kumar

HTML

<x-topbar>
	
</x-topbar>

<div onclick="states.reinOnClick()" class="bar">Hello World</div>

JavaScript

const styles = `
	.bar {
		background-color: royalblue;
		color: white;
	}
`;

const states = {};

class Topbar extends HTMLElement {
  constructor() {
    super();
    console.log('Topbar, constructor');
		this.counter = 0;
		states.reinOnClick = this.reinOnClick.bind(this);
		this.createShadowDOM();
  }
  connectedCallback() {
    console.log('Topbar, connectedCallback');
  }
  disconnectedCallback() {
    console.log('Topbar, disconnectedCallback');
  }
	reinOnClick(e) {
		console.log('Topbar, reinOnClick', this.counter++);
	}
  createShadowDOM() {
    const template = document.createElement('template');
    template.innerHTML = this.render();
    this.attachShadow({
      mode: 'open'
    });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  render() {
    return `
			<style>${styles}</style>
      <div class="bar"
			  onclick="states.reinOnClick()">Hakuna-matata</div>
    `;
  }
}

customElements.define('x-topbar', Topbar);