イベント

Overview

Where to add your event listeners

You need to add event listeners in a method that is guaranteed to fire before the event occurs. However, for optimal loading performance, you should add your event listener as late as possible.

You can add event listeners:

Using this in event handlers

The default JavaScript context object (this) inside an event handler belonging to a LitElement-based component is the component itself.

Therefore, you can use this to refer to your element instance inside any event handler:

class MyElement extends LitElement {
  render() {
    return html`<button @click="${this.handleClick}">click</button>`;
  }
  handleClick(e) {
    console.log(this.prop);
  }
}

See the documentation for this on MDN for more information.

Use cases

Fire an event from a LitElement-based component

Fire a custom event:

class MyElement extends LitElement {
  render() {
    return html`<div>Hello World</div>`;
  }
  firstUpdated(changedProperties) {
    let event = new CustomEvent('my-event', {
      detail: {
        message: 'Something important happened'
      }
    });
    this.dispatchEvent(event);
  }
}

Fire a standard event:

class MyElement extends LitElement {
  render() {
    return html`<div>Hello World</div>`;
  }
  updated(changedProperties) {
    let click = new Event('click');
    this.dispatchEvent(click);
  }
}

Handle an event fired by a LitElement-based component

Handle events fired by a LitElement-based component the same way you would handle any event fired from a standard DOM element.

To handle an event fired by a LitElement-based component that you’re using on any HTML page:

<my-element onMyEvent="(e) => {console.log(e)}"></my-element>
<my-element onClick="(e) => {console.log(e)}"></my-element>

To handle a custom event fired by a LitElement-based component from inside another LitElement template:

<my-element @my-event="${() => { console.log(event.detail.message) }}"></my-element>

Working with events and shadow DOM

When working with events and shadow DOM, there are a few things you need to know about.

Event bubbling

Some events bubble up through the DOM tree, so that they are detectable by any element on the page.

Whether or not an event bubbles depends on the value of its bubbles property. To check if a particular event bubbles:

handleEvent(e){
  console.log(e.bubbles);
}

See the MDN documentation on the Event interface for more information.

Event retargeting

Bubbling events fired from within shadow DOM are retargeted so that, to any listener external to your component, they appear to come from your component itself.

Example

<my-element onClick="(e) => console.log(e.target)"></my-element>
render() {
  return html`
    <button id="mybutton" @click="${(e) => console.log(e.target)}">
      click me
    </button>`;
}

When handling such an event, you can find where it originated from with composedPath:

handleMyEvent(event) {
  console.log('Origin: ', event.composedPath()[0]);
}

Custom events

By default, a bubbling custom event fired inside shadow DOM will stop bubbling when it reaches the shadow root.

To make a custom event pass through shadow DOM boundaries, you must set both the composed and bubbles flags to true:

firstUpdated(changedProperties) {
  let myEvent = new CustomEvent('my-event', { 
    detail: { message: 'my-event happened.' },
    bubbles: true, 
    composed: true });
  this.dispatchEvent(myEvent);
}

See the MDN documentation on custom events for more information.