
To dispatch an event, call the EventTarget.dispatchEvent() method. To create an event, use the CustomEvent() constructor. Understanding this concept helps you make sense of what’s happening with events.Ĭreate and dispatch events in a component’s JavaScript class. When we use slots, although the content appears to be rendered inside the slot element, a “pointer” to the original content gets inserted into the slot. Before we dive into the details, make sure you're already familiar with shadow DOM and passing markup into slots. There are two things about web components that make creating and dispatching DOM events a little different: shadow DOM and slots. Simply think of the event’s path as starting with your component, and then moving to its parent, and then grandparent, and so on. In Lightning web components, CustomEvent provides a more consistent experience across browsers, including Internet Explorer.ĭispatching events or adding listeners to the capture phase isn't supported. To create events, we strongly recommend using the CustomEvent interface instead of the Event interface. Lightning web components implement the EventTarget interface, which allows them to dispatch events, listen for events, and handle events. For example, a child component, example-todo-item, dispatches an event to tell its parent, example-todo-app, that a user selected it.Įvents in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser. Use events to communicate up the component containment hierarchy.

Components can also create and dispatch custom events. Lightning web components dispatch standard DOM events.
