title: How to avoid errors from onchange methods on lightning-input?
body: <p>I'm trying to learn the basics of Lightning Web Components and I'm having trouble getting the value of a lighting-input element.</p>
  
  <p>I understand that it's designed for one way data binding instead of two way (a decision that I find questionable), but I can't get an onchange method to work either. I'm running this sample on the <a href="https://developer.salesforce.com/docs/component-library/tools/playground" rel="nofollow noreferrer">Lighting playground</a>:</p>
  
  <pre><code>//app.html
  
  &lt;lightning-input
      label="test"
      onchange={handleChange}&gt;
  &lt;/lightning-input&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>//app.js
  
  import { LightningElement, track, api } from 'lwc';
  export default class App extends LightningElement {
      handleChange(event) {
          console.log(event)
      }
  }
  </code></pre>
  
  <p>And making any change to the input in the template gives me the following error:</p>
  
  <pre><code>Error: Disallowed method "appendChild" in ShadowRoot.
  </code></pre>
  
  <p>Why does the onchange method not work as expected and should I go about making it work as intended?</p>