title: Web Components: How to listen to form input changes
body: <p>I am working on a Web Component that should send data via a form to a server. In this example, I have the Object <code>Meal</code> and want to send a <code>name</code> to a server, coming from a form.</p>
  <p>The HTML gets rendered by <strong>handlers.js</strong> like this: I am saving the value of the input field &quot;name&quot; for my component in the <code>mapDOM</code> method.</p>
  <pre><code>export default {
      render() {
          return `${this.html()}`;
      },
  
       mapDOM(scope) {
          return {
              name: scope.getElementById('name').value,
            }
      },
   
      html() {
          return `&lt;form id=&quot;addEssenForm&quot;&gt;
                     &lt;div class=&quot;form-group&quot;&gt;
                       &lt;label for=&quot;name&quot;&gt;Name*&lt;/label&gt;
                       &lt;input class=&quot;form-control&quot; id=&quot;name&quot; type=&quot;text&quot;&gt;
                     &lt;/div&gt;
                     &lt;button id=&quot;submit&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;Hinzufügen&lt;/button&gt;
                  &lt;/form&gt;                
                  `
      }
  </code></pre>
  <p><strong>meal-add.component.js</strong></p>
  <pre><code>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 =&gt; {
              // Now get the new values of the input field.
          }
      );
    }
  </code></pre>
  <p>Now I have no idea, how my component can get the changes which are made in the input. The eventlistener indeed is working, it triggers the method everytime I update the input field.</p>