<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.