Web Component

Demo

Explanation

This is an example of two-way binding with a web component that reverses a string. Normally, the web component would output the reversed value, but in this example, all it does is perform the logic and dispatch an event containing the result, which is then displayed.

<div data-store="{name:'',reversed:''}">
    <input data-model="name">
    <span data-text="$reversed"></span>
    <reverse-component
        data-bind-name="$name"
        data-on-reverse="$reversed = event.detail.value"
    ></reverse-component>
</div>
<script type="module" src="/static/js/web_component.js"></script>

The name attribute value is bound to the $name store value, and an event listener modifies the $reversed store value sent in the reverse event.

The web component observes changes to the name attribute and responds by reversing the string and dispatching a reverse event containing the resulting value.

class ReverseComponent extends HTMLElement {
    static get observedAttributes() {
        return ['name'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        const value = newValue.split('').reverse().join('');
        this.dispatchEvent(new CustomEvent('reverse', {detail: {value}}));
    }
}

customElements.define('reverse-component', ReverseComponent);