When the template is rendered, id values may be transformed into globally unique values. Make sure that id values are unique within your HTML template. No support for the ::part pseudo-element.No support for the :host-context() pseudo-class function.Event retargeting preserves component encapsulation and prevents exposing a component’s internals.įor example, a click listener on always receives my-button as the target, even if the click happened on the button element.The CSS scoping matches the CSS Scoping Module Level 1 standard, with a few exceptions. If an event bubbles up and crosses the shadow boundary, the value of Event.target changes to represent an element in the same scope as the listener. The shadow boundary is the line between the regular DOM (also called the light DOM) and the shadow DOM. To get information about the event, use these properties and method of the Event Web API.Įach component’s internal DOM is encapsulated in a shadow DOM. Defaults to false.Ī Boolean value indicating whether the event can pass through the shadow boundary. When you create an event, define event propagation behavior using two properties on the event, bubbles and composed.Ī Boolean value indicating whether the event bubbles up through the DOM or not.

This content is adapted from the Salesforce Developer blog post, How Events Bubble in Lightning Web Components. Depending on where you attach a listener for the event, and where the event happens, you can have different targets. However, inside the shadow tree, you can handle events from specific targets in the tree. From outside the component, all event targets are the component itself. Simply think of the event’s path as starting with your component and then moving to its parent, and then grandparent, and so on.Įvent targets don’t propagate beyond the shadow root of the component instance. Dispatching events or adding listeners to the capture phase isn't supported. Lightning web components use only the bubbling phase. Lightning web component events propagate according to the same rules as DOM events. It’s important to understand how bubbling works so you can choose the most restrictive bubbling configuration that works for your component. When an event bubbles, it becomes part of your component's API and every consumer along the event's path must understand the event. To understand where events can be handled, understand how they propagate.Įvents bubble up through the DOM that’s how children and parents communicate-props down, events up. After an event is fired, it can propagate up through the DOM.

Lightning web component slot