Web components
Reactive web-components
How to create reactive web components with LemonadeJS
There are two necessary methods to create reactive web-components using LemonadeJS. The method
render()
should
return the template, the
connectedCallback()
will execute and append the result to the DOM when the web-component is ready.
<hello-element title="Hello world" />
<script>
class HelloElement extends HTMLElement {
constructor() {
super();
}
render() {
const self = this;
return `<>
<h1>{{self.title}}</h1>
<input type="button" value="setTitle()"
onclick="self.title = 'Test'" />
</>`;
}
connectedCallback() {
lemonade.render(this.render, this, this);
}
}
window.customElements.define('hello-element', HelloElement);
</script>