create webcomponents with support for className, htmlFor, etc.

component.jsx

function MyComponent () {
  return (
    <div className="MyComponent">
      <img
        is="my-image"
        className="MyComponent__image"
        src="image.png"
      />
    </div>
  )
}

webcomponents.js

function createReactCompatibleClass (BaseElement) {
  const attrs = [['className', 'class'], ['htmlFor', 'html']]

  return class extends BaseElement {
    static get observedAttributes () {
      return attrs.flat().map((attr) => attr.toLowerCase())
    }

    attributeChangedCallback (name, oldValue, newValue) {
      super.attributeChangedCallback?.(name, oldValue, newValue)

      if (newValue !== oldValue) {
        const pair = attrs.find((p) => p[0].toLowerCase() === name.toLowerCase() || p[1].toLowerCase() === name.toLowerCase())
        if (pair) {
          this[pair[0]] = newValue
        }
      }
    }

    connectedCallback () {
      super.connectedCallback?.()

      for (const pair of attrs) {
        const value = this.getAttribute(pair[0].toLowerCase()) || this.getAttribute(pair[1].toLowerCase())
        if (value) {
          this[pair[0]] = value
        }
      }
    }
  }
}

class MyImageElement extends createReactCompatibleClass(HTMLImageElement) {}

window.customElements.define('my-image', MyImageElement, { extends: 'img' })