What ways can be used to implement two-way binding…

Manually:

Using JavaScript, bind the input value to a variable and update the input when the variable changes. Listen for the input event on the input element and update the variable when the value changes.

let myValue = '';

const inputElement = document.getElementById('myInput');
const displayElement = document.getElementById('display');

inputElement.addEventListener('input', (event) => {
  myValue = event.target.value;
  displayElement.textContent = myValue; // Update display
});

// Example of updating the variable from elsewhere, which should update the input
function updateValue(newValue) {
  myValue = newValue;
  inputElement.value = myValue; // Update input
  displayElement.textContent = myValue; // Update display
}

Using frameworks/libraries:

Frameworks like Angular, Vue.js, React (with controlled components) provide built-in mechanisms for two-way binding.

Angular: [(ngModel)]="myValue"
Vue.js: v-model="myValue"
React: Using value and onChange to manage state.

import React, { useState } from 'react';

function MyComponent() {
  const [myValue, setMyValue] = useState('');

  const handleChange = (event) => {
    setMyValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={myValue} onChange={handleChange} />
      <p>Value: {myValue}</p>
    </div>
  );
}

Using Proxy API:

Create a Proxy object that reacts to property changes and updates the input value, as well as listens for the input event on the input element to update the Proxy property.

const inputElement = document.getElementById('myInput');
const data = { value: '' };

const reactiveData = new Proxy(data, {
  set(target, property, newValue) {
    if (property === 'value') {
      target[property] = newValue;
      inputElement.value = newValue; // Update input
      document.getElementById('display').textContent = newValue; // Update display
      return true;
    }
    return false;
  }
});

inputElement.addEventListener('input', (event) => {
  reactiveData.value = event.target.value; // Update Proxy property
});

// Example of updating the Proxy property from elsewhere
// reactiveData.value = 'New value';

Using Custom Elements with Shadow DOM and templates:

Create a custom element that encapsulates the input and implements binding logic inside its Shadow DOM.

class TwoWayInput extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <input type="text" />
      <p id="display"></p>
    `;

    this.inputElement = shadowRoot.querySelector('input');
    this.displayElement = shadowRoot.getElementById('display');

    this._value = '';

    this.inputElement.addEventListener('input', (event) => {
      this.value = event.target.value;
    });
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    this._value = newValue;
    this.inputElement.value = newValue;
    this.displayElement.textContent = newValue;
    this.dispatchEvent(new CustomEvent('change', { detail: this._value }));
  }

  connectedCallback() {
    // Possibly initialize value from attribute
    if (this.hasAttribute('initial-value')) {
      this.value = this.getAttribute('initial-value');
    }
  }
}

customElements.define('two-way-input', TwoWayInput);

What ways can be used to implement two-way binding for an input element?