JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Templated CEs, slots and event bubbling</title>
  </head>
  <body>
    <script type="module">
      import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';
      class MyItem extends LitElement {
        get menuButton() {
          return this.shadowRoot?.querySelector("button");
        }
        connectedCallback() {
          super.connectedCallback();
          this.addEventListener("click", this);
        }
        handleEvent(event) {
          if (event.originalTarget == this.menuButton) {
            let toggleEvent = new CustomEvent("toggle-panel-list", {
              bubbles: true,
            });
            console.log("Dispatching toggleEvent:", toggleEvent);
            this.dispatchEvent(toggleEvent);
          }
        }
        render() {
          return html`
            <li>
              <slot></slot>
              <button>☰</button>
            </li>`;
        }
      }
      customElements.define("my-item", MyItem);

      class MyContainer extends LitElement {
        connectedCallback() {
          super.connectedCallback();

          this.addEventListener("toggle-panel-list", event => {
            console.log("Caught toggle-panel-list event on container:", event);
          });
        }
        render() {
          return html`
            <div>
              <style>
                ul, ul > my-ce { display: block; }
                div { border: 1px solid green; }
                footer { border: 1px solid blue; }
              </style>
              <ul>
                <slot>No items</slot>
              </ul>
              <footer>Container footer</footer>
            </div>
          `;
        }
      }
      customElements.define("my-container", MyContainer);

      document.addEventListener("toggle-panel-list", event => {
        document.getElementById("message").textContent = `Caught toggle-panel-list event from...