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.

1<label>
2    Reversed
3    <input type="text" value="Your Name" data-bind:_name/>
4</label>
5<span data-signals:_reversed data-text="$_reversed"></span>
6<reverse-component
7    data-on:reverse="$_reversed = evt.detail.value"
8    data-attr:name="$_name"
9></reverse-component>

The name attribute value is bound to the $_name signal's value, and an event listener modifies the $_reversed signal's 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.

 1class ReverseComponent extends HTMLElement {
 2    static get observedAttributes() {
 3        return ["name"];
 4    }
 5
 6    attributeChangedCallback(name, oldValue, newValue) {
 7        const value = [...newValue].toReversed().join("");
 8        this.dispatchEvent(new CustomEvent("reverse", { detail: { value } }));
 9    }
10}
11
12customElements.define("reverse-component", ReverseComponent);