Web 组件：如何监听表单输入的变化

Question

我正在开发一个应该通过表单将数据发送到服务器的 Web 组件。在此示例中，我有对象 Meal 并希望将 name 从表单发送到服务器。

HTML 由 handlers.js 呈现，如下所示：我将我的组件的输入字段“名称”的值保存在 mapDOM 方法中。

export default {
    render() {
        return `${this.html()}`;
    },

     mapDOM(scope) {
        return {
            name: scope.getElementById('name').value,
          }
    },
 
    html() {
        return `<form id="addEssenForm">
                   <div class="form-group">
                     <label for="name">Name*</label>
                     <input class="form-control" id="name" type="text">
                   </div>
                   <button id="submit" class="btn" type="submit">Hinzufügen</button>
                </form>                
                `
    }

meal-add.component.js

export default class MealAddComponent extends HTMLElement {

constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = Template.render();
    this.dom = Template.mapDOM(this.shadowRoot);

    this.shadowRoot.addEventListener('change', e => {
            // Now get the new values of the input field.
        }
    );
  }

现在我不知道我的组件如何获得输入中所做的更改。事件监听器确实在工作，每次我更新输入字段时它都会触发该方法。

Answer 1

attributeChangedCallback 不会触发，因为您没有更改 <meal-add> 元素（或您给它的任何名称）上的 属性 name

我不明白需要 MutationObserver。
将 EventListener 附加到 input 和 button，您可以在主机文档中触发 submit 事件。如果您从 shadowDOM 中发出事件，请记住设置 composed:true 以便它转义 shadowDOM

另请注意：

 super();
 this.attachShadow({mode: 'open'});
 this.shadowRoot.innerHTML = Template.render();

可以写成：

 super()
   .attachShadow({mode: 'open'})
   .innerHTML = Template.render();