JSFiddle - React, Tailwind, and code Playground

by jrunning

HTML

<my-parent></my-parent>

JavaScript

import('https://unpkg.com/[email protected]/lit-element.js?module').then(({ LitElement, html }) => {

class MyParentElement extends LitElement {
	render() {
    return html`
      <p>Todo App</p>
      <add-item @add-item=${this.handleAddItem}></add-item>
    `;
  }
  
  handleAddItem() {
  	console.log('Item added');
  }
}
customElements.define('my-parent', MyParentElement);

class AddItemElement extends LitElement {
  addItem() {
    this.dispatchEvent(
      new CustomEvent('add-item', {
        bubbles: true,
        composed: true,
      })
    );
  }

	render() {
    return html`
      <button @click="${this.addItem}">Add Item</button>
    `;
  }
}
customElements.define('add-item', AddItemElement);

});