JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>

<!-- Works only on browsers that support Javascript modules like Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
  import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';

  class MyElement extends LitElement {
  
  
  	constructor(){
      super();
      this.myCallable = function(){
        alert("MyElement Callable!")
      }
    }
  
	  static get properties() {
    	return {
      	mood: {type: String},
        newCallable: {type: Object}
      }
    }
    
    static get styles() {
      return css`.mood { color: green; }`;
    }

    execute(){
      this.myCallable();
    }
    
    passCallable(){
        this.newCallable = function(){
        alert('Generated callable ' + Math.random())
      } 
    }

    render() {
      return html`Web Components are <span class="mood">${this.mood}</span>! (MyElement)
      <button @click=${this.execute}>run callable 1</button>
      <button @click=${this.passCallable}>pass new callable to sub element</button>
      <div>
      <sub-element .newCallable=${this.newCallable}></sub-element>
      </div>
		`;
    }  
  }
	
  customElements.define('my-element', MyElement);
  
  class SubElement extends LitElement {
  
  
  	constructor(){
      super();
      this.myCallable = function(){
        alert("MyElement Callable2!")
      }
    }
  
	  static get properties() {
    	return {
      	newCallable: {type: Object}
      }
    }
    execute(){
    	if(this.newCallable){
      	this.newCallable();
      }
      else{
      	this.myCallable();
      }
    }

    render() {
      return html`<button @click=${this.execute}>run callable 2</button></div>
		`;
    }  
  }
	
  customElements.define('sub-element', SubElement);
  
</script>

<my-element mood="great"></my-element>