Published
Edited
Jun 8, 2022
1 fork
7 stars
Insert cell
Insert cell
Insert cell
Insert cell
<simple-greeting name="from a Markdown cell"></simple-greeting>
Insert cell
Insert cell
SimpleGreeting, html`<simple-greeting name="from a Javascript cell,
returning an HTML literal"></simple-greeting>`
Insert cell
Insert cell
Insert cell
SimpleGreeting = {
class SimpleGreeting extends LitElement {
static get styles() {
return lit.css`
:host {
display: inline-block; }

div {
color: indigo; font-family: 'Georgia';
border: 4px solid indigo; border-radius: 2rem;
padding: 1rem 1.5rem; margin-bottom: 1rem; }

div:hover {
background-color: indigo; color: white; }`;
}
static get properties() {
return {
name: { type: String }
}
}
constructor() {
super();
this.name = 'Somebody';
}
render() {
return lit.html`<div>Hello, <em>${this.name}!</em></div>`;
}
}
if( !window.customElements.get( 'simple-greeting')) {
window.customElements.define( 'simple-greeting', SimpleGreeting)
}
return SimpleGreeting
}
Insert cell
Insert cell
Insert cell
Insert cell
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