title: Is there any better way to pass function to props with LitElement?
body: <p>I'm using polymer LitElement and i tried to pass a function to props but did'nt work, this is the way i found to work, but its awfull... Any better suggestions?</p>
  
  <pre><code>import { LitElement, html, customElement, property } from 'lit-element';
  
  @customElement('my-element')
  export class MyElement extends LitElement {
  
  
  onButtonClick = function name (){
  
    console.log("Clicked!!")
  }
  
    render() {
      return html`
  
        &lt;c-button text="Button Name" onClick="${this.onButtonClick}" /&gt;
      `;
    }
  }
  
  @customElement("c-button")
  export class CButton extends LitElement{
  
    @property() text;
    @property() onClick;
  
    handleClick(){
      let fct = eval(`( ${this.onClick} )` )
      fct();
    }
  
    render(){
      return html`
  
        &lt;button @click="${this.handleClick}" &gt; ${this.text} &lt;/button&gt; 
      `
    }
  }
  
  </code></pre>