React 19 Custom Elements

react-19-custom-elements-webcomponents.md

If onClick the component fires first if onclick react fires first the default behavior is that all serialiseable props get attributes and properties so be aware that you could overwrite some default HTMLElement properties with intend or without :)

customElements.define('super-click', class SuperClick extends HTMLElement {
  connectedCallback() {
    alert('Comp');
    this.onclick = () => {
      alert('clicked');
    };
    //this.innerHTML = `Clock me`
  }
});
export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }
     alert('render');
  return (<>
    <p>1</p>
    <super-click N="me" className="heroo" onClick={handleClick}>
      Click me
    </super-click>
    </>
  );
}

in style properties the order does matter as React uses a for i loop.

    <super-click N="me"  style={{marginRight:  1 + 'em', cssText: "border:solid 10px; color:green;", color: "red",  border: "solid 5px",   }} className="heroo" onClick={handleClick}>