<react-root></react-root>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
import React from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";

customElements.define(
  "wc-demo",
  class extends HTMLElement {
    connectedCallback() {
      const button = Object.assign(document.createElement("button"), {
        textContent: "A Web Component Button"
      });
      this.append(button);

      button.addEventListener("click", this);
    }
    handleEvent(e) {
      this.dispatchEvent(new CustomEvent("SpecialEvent", { bubbles: true }));
    }
  }
);

const MyReactComponent = () => {
  function mySpecialEvent() {
    alert("My special event!!");
  }

  return (
    <wc-demo onSpecialEvent={() => mySpecialEvent()}>
      <h1>Hello, World!</h1>
    </wc-demo>
  );
};

const root = createRoot(document.querySelector("react-root"));
root.render(<MyReactComponent />);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.