Отражение свойства и атрибута в пользовательском элементе HTMLInput в обоих направлениях в нативном JavaScript

Question

У меня есть пользовательское поле ввода, которое наследуется от HTMLInputElement:

class TB extends HTMLInputElement {

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

  constructor() {
    super();

    this.addEventListener("change", function (event) {
      this.setAttribute('value', this.value);
    });
    }

    connectedCallback() {
      this.setAttribute('value', this.value);
    }

    attributeChangedCallback(name, oldValue, newValue) { 
        this.value = newValue;
      }
  }

Я могу сделать следующее:

1. Введите "test" ввход

   (tb.value && tb.value..attributes["value"])==="test

2. Изменение значения атрибута для изменения свойства

tb.attributes["value"].value ="test" -> tb.value ==="test"

Но я не могу сделать следующее:

tb.value = "test" -> tb.attributes["value"] === "test";

Я думаю, что решение состоит в том, чтобы переопределить get value () и установить значение (значение) класса.Но у меня нет никакого успеха с этим.

Answer 1

Вы не должны этого делать, потому что это изменит поведение по умолчанию для элемента <input>, который является односторонним связыванием только атрибута value со свойством value.

В любом случае вам нужно будет перегрузить сеттер и геттер value в сочетании с super, стараясь не создавать бесконечный цикл с двумя обновлениями.

class TB extends HTMLInputElement {
    static get observedAttributes() { return ['value'] }

    constructor() {
        super()
        this.addEventListener( 'input', () => this.setAttribute( 'value', super.value ) )
    }

    attributeChangedCallback(name, oldValue, newValue) { 
        this.value = newValue
    }
    
    get value() { return super.value }

    set value( val ) {
        super.value = val
        if ( val != this.getAttribute( 'value' ) )
            this.setAttribute( 'value', val )
    }
}
customElements.define( 'my-input', TB, { extends: 'input' } )

<input is="my-input" value="test" id=IN>

Примечание: это простой пример, когда типы данных не проверяются.