JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/hyperhtml@2.18.0/min.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/hyperhtml@2.34.0/min.js"></script>-->

JavaScript

console.clear();

class MyComponent extends HTMLElement {
  static get observedAttributes() { return ['disabled']; }
  
  constructor(...args) {
    super(...args);
    this.html = hyperHTML.bind(this);
    this.state = {};
  }
  
  connectedCallback() {
    this.render();
  }
  
  get disabled() {
    return ![null, undefined, false, 'false'].includes(this.state.disabled);
  }
  
  set disabled(value) {
    // THE VALUE RECIEVED HERE IS DIFFERENT
    console.log(value);
    // -----
    this.state.disabled = value;
    this.render();
  }
  
  render() {
    return this.html`
      <button disabled=${this.disabled}>Test Button</button>`;
  }
}

customElements.define('my-component', MyComponent);
const isDisabled = null;

const render = hyperHTML.bind(document.body);
document.body.appendChild = render`<my-component disabled=${isDisabled}></my-component>`;