<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() {
this.innerHTML +=
", " + this.myObject.name + " the " + this.myObject.job + ".";
}
get myObject() {
return this._myObject;
}
set myObject(obj) {
this._myObject = obj;
}
}
);
const MyReactComponent = () => {
return (
<wc-demo myObject={{ name: "Chris Coyier", job: "Cool Dude" }}>
Hello
</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.