file.js

class MyCustomElement extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement('template');
    template.id = 'pool-calculator-template';
    template.innerHTML = `
      <input type="text" id="input"/>
      `;
    // this.appendChild(template);
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.appendChild(template.content.cloneNode(true));

    this.input = this.shadow.getElementById('input');

    this.input.value = this.getAttribute('value');
    this.input.onkeyup = () => {
      this.setAttribute('value', this.input.value);
      this.dispatchEvent(
        new CustomEvent('change', { detail: this.input.value })
      );
    };
  }

  static get observedAttributes() {
    return ['value'];
  }
  static get formAssociated() {
    return true;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.input.value = newValue;
  }
  // our custom element code
}

customElements.define('my-custom-element', MyCustomElement);

main.html

			<my-custom-element data-bind-value="$test" data-on-change="$test=event.detail"></my-custom-element>