Lit-elements，用于编写受控组件的惯用方式

Question

我正在通过@open-wc使用lit-elements，目前正在尝试编写一组嵌套的组件，其中内部组件是输入字段，而某些祖先组件具有支持某些任意重写规则，例如“不允许输入数字”。

我想弄清楚的是构建点状元素的正确方法。在React中，我将使用'受控组件'see here轻松地强制所有组件提交到根组件属性。

下面的示例是我使用Lit-Elements提出的。 有更好的方法吗？>]

请注意；

由于我想忽略一些角色，因此挑战变得有些困难。在第5级没有e.target.value = this.value;的情况下，输入元素将与被忽略字符上的组件状态不同。我希望整个组件链正确同步，因此可以举例说明标题标签。

export class Level1 extends LitElement {
  static get properties() {
    return {
      value: { type: String }
    };
  }

  render() {
    return html`
      <div>
        <h1>${this.value}</h1>
        <level-2 value=${this.value} @input-changed=${this.onInput}></level-2>
      </div>`;
  }

  onInput(e) {
    this.value = e.detail.value.replace(/\d/g, ''); 
  }
}

...

export class Level4 extends LitElement {
  static get properties() {
    return {
      value: { type: String }
    };
  }

  render() {
    return html`
      <div>
        <h4>${this.value}</h4>
        <level-5 value=${this.value}></level-5>
      </div>`;
  }
}

export class Level5 extends LitElement {
  static get properties() {
    return {
      value: { type: String }
    };
  }

  render() {
    return html`
      <div>
        <h5>${this.value}</h5>
        <input .value=${this.value} @input=${this.onInput}></input>
      </div>`;
  }

  onInput(e) {
    let event = new CustomEvent('input-changed', {
      detail: { value: e.target.value },
      bubbles: true,
      composed: true
    });

    e.target.value = this.value;
    this.dispatchEvent(event);
  }
}

export class AppShell extends LitElement {
  constructor() {
    super();
    this.value = 'initial value';
  }

  render() {
    return html`
      <level-1 value=${this.value}></level-1>
    `;
  }
}

[我正在通过@ open-wc使用lit-elements，目前正在尝试编写一组嵌套的组件，其中内部组件是输入字段，而某些祖先组件必须支持某些...