title: How to return event from onChange input element in WebComponent
body: <p>I want to create a web component that returns me information whenever value in input element was changed. I am using Stencil.js.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import { Component, Prop, h } from '@stencil/core';
  
  @Component({
    tag: 'wp-input',
    styleUrl: 'input.css',
    shadow: true
  })
  export class InputComponent {
  
      @Prop() type: string = 'text';
      @Prop() disabled: boolean = false;
      @Prop() required: boolean = false;
      @Prop() labelTxt: string = '';
      @Prop() class: string = '';
      @Prop() value: string = '';
      @Prop() error: string = '';
      @Prop() id: string;
      @Prop() whenChange: Function;
  
  
    render() {
      return  (
          &lt;div class={`wp-input-wrapper`}&gt;
              &lt;label htmlFor={this.id}&gt;{this.labelTxt}&lt;/label&gt;
              &lt;input type="text"
                  onInput={event =&gt; this.whenChange(event)}
                  class={`wp-input`} id={this.id}
                  value={this.value} required={this.required} /&gt;
              {this.error &amp;&amp; &lt;div class="error"&gt;
                  {this.error}
              &lt;/div&gt;}
          &lt;/div&gt;
      )
  
    }
  }
  </code></pre>
  
  <p>I am running it like this on my website:</p>
  
  <pre><code>  &lt;script&gt;
      changeFunction = event =&gt; {
          console.log(event)
      }
    &lt;/script&gt;
  
    &lt;wp-input 
      when-change='changeFunction'
      value='i am here' error='adf' label-txt='Label text'&gt;&lt;/wp-input&gt;
  </code></pre>
  
  <p>But I'm still getting this error:</p>
  
  <blockquote>
    <p>wp-input.entry.js:16 Uncaught TypeError: this.whenChange is not a function</p>
  </blockquote>
  
  <p>Is it even possible to get value from web component? Or to be notified somehow that value has changed?</p>