Polymer Events — Handling and Dispatching Events in LitElement

import { LitElement, html } from 'lit';

class EventDemo extends LitElement {
  static properties = { count: { type: Number } };

  constructor() { super(); this.count = 0; }

  _onClick(e) {
    this.count++;
    console.log('Clicked', e.target);
  }

  _onKeydown(e) {
    if (e.key === 'Enter') this._onClick(e);
  }

  render() {
    return html`
      <button @click=${this._onClick} @keydown=${this._onKeydown}>
        Clicked ${this.count} times
      </button>
    `;
  }
}
customElements.define('event-demo', EventDemo);

import { LitElement, html } from 'lit';

class Dropdown extends LitElement {
  static properties = { open: { type: Boolean }, options: { type: Array } };

  constructor() {
    super();
    this.open = false;
    this.options = ['Option 1', 'Option 2', 'Option 3'];
  }

  _toggle() { this.open = !this.open; }
  _select(option) {
    this.open = false;
    this.dispatchEvent(new CustomEvent('select', {
      detail: { value: option },
      bubbles: true,
      composed: true
    }));
  }

  render() {
    return html`
      <button @click=${this._toggle}>${this.open ? 'Close' : 'Open'}</button>
      ${this.open ? html`<ul>${this.options.map(o => html`
        <li @click=${() => this._select(o)}>${o}</li>
      `)}</ul>` : ''}
    `;
  }
}
customElements.define('my-dropdown', Dropdown);

class FormPage extends LitElement {
  constructor() { super(); this.selected = ''; }

  render() {
    return html`
      <my-dropdown @select=${e => this.selected = e.detail.value}></my-dropdown>
      <p>Selected: ${this.selected}</p>
    `;
  }
}
customElements.define('form-page', FormPage);

import { LitElement, html } from 'lit';

class DataTable extends LitElement {
  static properties = { rows: { type: Array } };

  constructor() {
    super();
    this.rows = [
      { id: 1, name: 'Alice', role: 'Admin' },
      { id: 2, name: 'Bob', role: 'Editor' },
      { id: 3, name: 'Charlie', role: 'Viewer' }
    ];
  }

  _onTableClick(e) {
    const row = e.target.closest('[data-id]');
    if (!row) return;
    const id = parseInt(row.dataset.id);
    const action = e.target.closest('[data-action]')?.dataset.action;

    if (action === 'edit') this._editRow(id);
    else if (action === 'delete') this._deleteRow(id);
    else this._selectRow(id);
  }

  _editRow(id) { console.log('Edit row', id); }
  _deleteRow(id) { this.rows = this.rows.filter(r => r.id !== id); }
  _selectRow(id) { console.log('Select row', id); }

  render() {
    return html`
      <table @click=${this._onTableClick}>
        <tr><th>Name</th><th>Role</th><th>Actions</th></tr>
        ${this.rows.map(row => html`
          <tr data-id=${row.id}>
            <td>${row.name}</td>
            <td>${row.role}</td>
            <td>
              <button data-action="edit">Edit</button>
              <button data-action="delete">Delete</button>
            </td>
          </tr>
        `)}
      </table>
    `;
  }
}
customElements.define('data-table', DataTable);

import { LitElement, html } from 'lit';

class InnerComponent extends LitElement {
  _notify() {
    this.dispatchEvent(new CustomEvent('action', {
      detail: { source: 'inner' },
      bubbles: true,
      composed: true
    }));
  }

  render() { return html`<button @click=${this._notify}>Notify</button>`; }
}
customElements.define('inner-comp', InnerComponent);

class OuterComponent extends LitElement {
  render() {
    return html`<div class="wrapper"><inner-comp></inner-comp></div>`;
  }
}
customElements.define('outer-comp', OuterComponent);

document.querySelector('outer-comp').addEventListener('action', e => {
  console.log('Heard from', e.detail.source, 'path:', e.composedPath());
});

import { LitElement, html } from 'lit';

class KeyboardNav extends LitElement {
  static properties = { items: { type: Array }, activeIndex: { type: Number } };

  constructor() {
    super();
    this.items = ['Home', 'Products', 'About', 'Contact'];
    this.activeIndex = 0;
  }

  _onKeydown(e) {
    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex + 1) % this.items.length;
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
      e.preventDefault();
      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
    } else if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      this._activate(this.activeIndex);
    }
  }

  _activate(index) {
    this.dispatchEvent(new CustomEvent('navigate', {
      detail: { item: this.items[index], index },
      bubbles: true,
      composed: true
    }));
  }

  render() {
    return html`
      <nav @keydown=${this._onKeydown}>
        ${this.items.map((item, i) => html`
          <a href="#${item.toLowerCase()}"
             class="${i === this.activeIndex ? 'active' : ''}"
             @click=${e => { e.preventDefault(); this._activate(i); }}
             tabindex=${i === this.activeIndex ? '0' : '-1'}>
            ${item}
          </a>
        `)}
      </nav>
    `;
  }
}
customElements.define('keyboard-nav', KeyboardNav);