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>