Published
Edited
Jun 8, 2021
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
MyCE = {
let C = p => {
var r = Preact.useRef();
var str = p.name || "world";
Preact.useEffect(() => {
r.current.getRootNode().host.value = str;
r.current.getRootNode().host.dispatchEvent(new CustomEvent("input"));
}, [p.name]);
return htm`
<style>
*{
color:tomato;
}
</style>
<p ref=${r}>hello, ${str}</p>`;
};
try {
define(C, "hello-component", ["name"], { shadow: true });
} catch (e) {}
return C;
}
Insert cell
viewof hello = html`<hello-component name="Observable!"></hello-component>` //can only register once, needs page refresh to update if you edit the code above..
Insert cell
hello
Insert cell
Insert cell
viewof value = Preview(htm`<${MyCE} name="Example Component"></>`) //use this for live preview while developing! Thsi uses preact to render but uses shadow dom so styles wont leak..
Insert cell
value
Insert cell
//Render(htm`<${MyCE} name="Example Component"></>`)
//uncomment the above line and scroll up! all the page text color is changed!
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more