Skip to content

Instantly share code, notes, and snippets.

@kenchris
Created Aug 21, 2017
Embed
What would you like to do?
<html>
<script type="module">
import { html, render } from '/lit-html.js';
class MyGreater extends HTMLElement {
static get observedAttributes() { return ['data-name']; }
constructor() {
super();
this.attachShadow({mode: 'open'});
this._name = null;
}
attributeChangedCallback(attr, oldValue, newValue) {
console.log(attr);
if (attr == 'data-name') {
this._name = newValue;
this.invalidate();
}
}
render() {
return html`
Hi <b>${this._name ? this._name : "some body"}</b>
`;
}
connectedCallback() {
this.invalidate();
}
invalidate() {
if (!this.needsRender) {
this.needsRender = true;
Promise.resolve().then(() => {
this.needsRender = false;
render(this.render(), this.shadowRoot);
});
}
}
}
class FancyGreater extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
render() {
return html`
<style>
div {
background-color: green;
}
</style>
<div>
<my-greeter data-name="fancy-pancy"></my-greeter>
</div>
`;
}
connectedCallback() {
this.invalidate();
}
invalidate() {
if (!this.needsRender) {
this.needsRender = true;
Promise.resolve().then(() => {
this.needsRender = false;
render(this.render(), this.shadowRoot);
});
}
}
}
customElements.define('my-greeter', MyGreater);
customElements.define('fancy-greeter', FancyGreater);
</script>
<body>
<my-greeter data-name="Kenneth">Hi someone</my-greeter>
<br>
<fancy-greeter></fancy-greeter>
</body>
</html>
@twhitbeck
Copy link

twhitbeck commented Aug 24, 2017

Seems like MyGreater should be MyGreeter. Same with FancyGreater. Looks like cool stuff!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment