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" />
class HelloElement extends HTMLElement {
    constructor() {

    render() {
        const self = this;
        return `<>
            <input type="button" value="setTitle()"
                onclick="self.title = 'Test'" />

    connectedCallback() {
        lemonade.render(this.render, this, this);

window.customElements.define('hello-element', HelloElement);