Web Components with LemonadeJS

This section explains how to create reactive web components using LemonadeJS. LemonadeJS assist in creating a reactive layer on top of web components, allowing developers to build amazing reactive components with two-way data binding in a fraction of the time.

Documentation

Native Methods

You can create a new web-component using the createWebComponent method.

Method Description
createWebComponent Create a new web-component.
lemonade.createWebComponent(name: string, handler: Function, options: WebComponentOptions) => void

LemonadeJS automatically prefixes lm- to the tag name, so you only need to choose a simple name for your web component, as shown below.

lemonade.createWebComponent('calendar', myCalendar);

For the example above, a new web-component will be created as: <lm-calendar>.

Settings

Available options when creating a new web-component using LemonadeJS.

Method Description
shadowRoot?: boolean Create the web component inside a shadowRoot
applyOnly?: boolean If set to true, LemonadeJS applies the self to the existing HTML inside the tag already in the DOM without rendering any template

Events

Method Description
self.onconnect?: (whenCreated) => boolean When the component is added back to the DOM.

Example

Create a web new reactive web component using the LemonadeJS components.

<lm-test title="Hello World"></lm-test>
<script>
const ComponentTest = function() {
    const self = this;
    self.update = function() {
        self.text.style.color = 'red';
    }
    return `<>
        <p>{{self.title}}</p>
        <input value='Any text' :ref='self.text' />
        <input type='button' onclick='self.update' value='Update' />
    </>`;
}

lemonade.createWebComponent('test', ComponentTest, {
    shadowRoot: false,
});
</script>

Custom Reactive Web Components

Alternatively, you can manually create custom web components using LemonadeJS. This approach requires your web component class to include specific methods essential for its operation and integration within web applications.

Method Description
render() Returns the HTML template of your component, defining its structure and content.
connectedCallback() This is a lifecycle hook triggered when your web component is added to the DOM. In LemonadeJS, it carries out rendering logic and appends the render() method's template to the DOM, making the component interactive.

Note: It's crucial to check for self.el within connectedCallback to ensure the component renders only once. If the component is removed and re-inserted into the DOM, this method may be invoked multiple times.

Example

Here's a basic "Hello World" example to illustrate the use of these methods in a LemonadeJS component:

<div id="root">
    <hello-component title="Hello world" />
</div>
<script>
class Hello extends HTMLElement {
    constructor() {
        super();
    }

    change() {
        // Change the title
        this.title = 'Test';
    }

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

    connectedCallback() {
        // Only renders for the first time
        if (! this.el) {
            lemonade.render(this.render, this, this);
        }
    }
}

window.customElements.define('hello-component', Hello);
</script>

Edit this page on GitHub