JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.0-rc.8/webcomponents-lite.js"></script>

<test-component></test-component>

JavaScript

class TestElement extends HTMLElement {
  constructor() {
    super();
    
    console.log('constructor');
  }

  static get observedAttributes() {
  	return ["data-test", "test1"];
  }
  
  get test1() {
    return 'test456';
  }
  
  set test1(v) {
    this.setAttribute("test1", v);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(name, oldValue, newValue);
  }
  
  connectedCallback() {
      this.dataset.test = 'test123';
      this.test1 = 'test789';
  }
}

customElements.define("test-component", TestElement);