JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.0.0-alpha.3/custom-elements.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div>
Test
<my-component id="compo" foo="bar"></my-component>

<button id="myBtn">Change value</button>

</div>

JavaScript

class MyComponent extends HTMLElement {
	constructor() {
    super();
  }
  
  static get observedAttributes() {
    return ['foo'];
  }
  
  attributeChangedCallback(attrName, oldVal, newVal) {
    console.log('[my component] attribute', attrName, 'changed from', oldVal, 'to', newVal);
  }
}

window.customElements.define('my-component', MyComponent);

$('#myBtn').click(() => $('#compo').attr('foo', 'baz'));