Web Component
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.
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 len = newValue.length;
8 let value = Array(len);
9 let i = len - 1;
10 for (const char of newValue) {
11 value[i--] = char.codePointAt(0);
12 }
13 value = String.fromCodePoint(...value);
14 this.dispatchEvent(new CustomEvent("reverse", { detail: { value } }));
15 }
16}
17
18customElements.define("reverse-component", ReverseComponent);