Avoid prefixing custom event names with ‘on’Īvoid prefixing custom event names with ‘on’: The event handler names start with on. Also do not use reserved keywords like ‘slot’, ‘part’, ‘is’. Be careful while naming variablesīe careful while naming variables: Do not start a property name with ‘on’, ‘aria’, ‘data’. Here are 20 Tips and Trick for Lightning web components with examples. LWS prevents you from breaking shadow DOM encapsulation by enforcing a value of closed on the ShadowRoot's mode property for all components.Tips & Trick for Lightning Web Components These APIs aren’t restricted by Lightning Web Security (LWS).

However, in Aura components version 39.0 and earlier, Lightning Locker is disabled at the component level, so an Aura component could have code that fails. Lightning Locker prevents you from breaking shadow DOM encapsulation between Lightning web components by blocking these APIs. If you’re using a third-party JavaScript library that uses these DOM APIs to reach into a component’s shadow tree, work with the library author to file and fix issues. Watch Salesforce Developer Evangelist Alba Rivas explain the Shadow DOM.ĭon’t use these DOM APIs to reach into a component’s shadow tree in orgs that use Lightning Locker. See DOM Inspection Tests Are Subject to Change. The component doesn't own these elements, so you don’t use template. To access DOM elements passed via slots, call this.querySelector(). 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. Access SlotsĪ slot is a placeholder for markup that a parent component passes into a component’s body. To access its own shadow tree, a Lightning web component calls (). For example, code can’t call document.querySelector() to select nodes in a Lightning web component’s shadow tree. Code can’t use document or document.body to access the shadow tree of a Lightning web component.

Access ElementsĮlements in a shadow tree aren’t accessible via traditional DOM querying methods.

To prevent exposing a component’s internal details, if an event bubbles up and crosses the shadow boundary, 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 c-todo-item component, because the styles don’t reach into the shadow tree. CSSĬSS 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.

Lightning web component slot