Created
August 2, 2018 12:09
-
-
Save johnniehard/616c6a7e97d4c679220b6aee0d76588d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { render, html } from 'lit-html' | |
class MyElement extends HTMLElement { | |
constructor(){ | |
super() | |
this.state = { | |
loading: true | |
} | |
} | |
setState(stateUpdate) { | |
const newState = { | |
...this.state, | |
...stateUpdate | |
} | |
if (!isEqual(newState, this.state)) { | |
this.state = newState | |
this.render() | |
} | |
} | |
connectedCallback(){ | |
this.render() | |
setTimeout(() => { | |
this.setState({ | |
loading: false | |
}) | |
}, 2000) | |
} | |
render(){ | |
const { loading } = this.state | |
const content = html` | |
<h1>${loading ? ('Loading') : ('Done')}</h1> | |
` | |
render(content, this) | |
} | |
} | |
customElements.define('my-element', MyElement) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment