JSFiddle - React, Tailwind, and code Playground

HTML

<custom-counter id="counter1"></custom-counter>
<br>
<custom-counter id="counter2"></custom-counter>

JavaScript

class CustomCounter extends HTMLElement {
  constructor() {
    super();
    const shaddow = this.attachShadow({mode:'open'});
    let counter = 0;
    shaddow.innerHTML = `
       <style>
          span {
            background-color: yellow;
          }
       </style>
       <span>count: 0</span>
       <button>count!</button>
    `;
    shaddow.querySelector('button').addEventListener('click', () => {
	    shaddow.querySelector('span').innerHTML = `count: ${++counter}`;
    });
  }
}

customElements.define('custom-counter', CustomCounter);