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-signals="{name:'',reversed:''}">
  <input data-bind-name />
  <span data-text="reversed.value"></span>
  <reverse-component
    data-attributes-name="name.value"
    data-on-reverse="reversed.value = evt.detail.value"
  ></reverse-component>
</div>
<script type="module" src="/static/js/web_component.js"></script>

The name attribute value is bound to the name.value signals value, and an event listener modifies the reversed.value signals 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);