JSFiddle - React, Tailwind, and code Playground

HTML

<d-toggle-button>Button</d-toggle-button>

CSS

.d-toggle-button {
  border: 1px solid black;
  border-radius: 3px;
  cursor: default;
  padding: 0.2em 0.5em;
  user-select: none;
}

.d-toggle-button[aria-pressed=true] {
  background-color: black;
  color: white;
}

JavaScript

const ELEMENT_NAME = 'd-toggle-button';

class ToggleButton extends HTMLElement {

  connectedCallback () {
    this.classList.add(ELEMENT_NAME);
    this.setAttribute('role', 'button');
    this.addEventListener('click', () => {
      this.pressed = !this.pressed;
      this.dispatchEvent(new CustomEvent('toggle'));
    });
  }

  set pressed (value) {
    this.setAttribute('aria-pressed', value);
  }

  get pressed () {
    return this.getAttribute('aria-pressed') === 'true';
  }
}

customElements.define(ELEMENT_NAME, ToggleButton);