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);