title: How to pass callback function to litelement from React?
body: <p>I'm trying to use lit-element component in my React project, and I'd like to pass in the callback function to lit-element component from React but with no luck.</p>
  
  <p>I've tried a couple of different ways, like change property type, and pass function in as a string, but none of them works.</p>
  
  <p><b>lit-element component code:</b></p>
  
  <pre><code>import { LitElement, html } from "lit-element";
  
  class MyButton extends LitElement {
    static get properties() {
      return {
        clickHandler: {
          type: String
        },
        bar: {
          type: String
        }
      };
    }
  
    render() {
      const foo = this.clickHandler; //value is undefined
      const bar = this.bar; //value is "it's bar"
      return html`
        &lt;button @click=${this.clickHandler}&gt;click me&lt;/button&gt;
      `;
    }
  }
  
  customElements.define("my-button", MyButton);
  </code></pre>
  
  <p><b>react side code:</b></p>
  
  <pre><code>&lt;my-button clickHandler={() =&gt; alert("clicked")} bar="it's bar" /&gt;
  </code></pre>
  
  <p>I put a break point in the render section of the component, and I can see the 'bar' value get passed in correctly, but the value of 'clickHandler' is undefined.</p>
  
  <p>Does anyone have any idea on how to pass function from React to lit-element?</p>
  
  <p>Thanks!</p>