The component doesn't own these elements, so you don’t use template. To access DOM elements passed in via slots, call this.querySelector() and this.querySelectorAll(). DOM elements that are passed to a component via slots aren’t owned by the component and aren’t in the component’s shadow tree. See Access Elements the Component Owns.Ī slot is a placeholder for markup that a parent component passes into a component’s body.

To access elements a component renders from the component’s JavaScript class, use the template property. If an event bubbles up and crosses the shadow boundary, to hide the internal details of the component that dispatched the event, some property values change to match the scope of the listener. In our example, a p style defined in the todoApp.css stylesheet doesn’t style the p element in the example-todo-item component, because the styles don’t reach into the shadow tree. This means CSS styles defined in a parent component don’t leak into a child. Let’s look at how to work with the shadow tree in each of these areas.ĭOM queries and CSS selectors can't cross the shadow boundary, which creates encapsulation. I'm a paragraph element, part of the light DOM The outside world can't see them or access them. The component owns them they're regular DOM elements.įrom the point of view of the outside world, those same elements are part of the component's shadow DOM. Whether a DOM is a light DOM or shadow DOM depends on the point of view.įrom the point of view of a component's JavaScript class, the elements in its template belong to the light DOM. The regular DOM is also called the light DOM to distinguish it from the shadow DOM. It's where the shadow DOM ends and the regular DOM begins. The shadow boundary is the line between the shadow root and the host element. The shadow root isn’t an element it’s a document fragment. This node is attached to a regular DOM node called a host element.

The shadow root is the top-most node in a shadow tree. This boundary is called the shadow boundary. The shadow root defines the boundary between the DOM and the shadow tree. See the Hello recipes in the Lightning Web Components recipes app.

Lightning web component slots