Skip to main content

There is no usage guidance for this tag … yet!

Usage guidance, also known as a tag wiki excerpt, is a short blurb that describes when and why a tag should be used on this site specifically.

Lightning web components have a shadow DOM that hides the elements inside the component from the page that contains the component. The shadow DOM keeps the component’s styling and behavior consistent in any context.

One of the challenges in developing reusable web components is creating encapsulation—exposing what you want consumers to be able to change and hiding what you don’t want. Shadow DOM offers an elegant solution by creating a hidden DOM for components that component consumers can’t manipulate. It also encapsulates CSS styling.

Shadow DOM is a web standard. To make development easier for component authors, the Lightning Web Components shadow DOM works a bit differently than the web standard.

One difference is that the shadow DOM for a Lightning web component is created automatically. The component author doesn’t have to implement it (no need to use the attachShadow() or appendChild() methods). Also, a Lightning web component’s shadow DOM works even on platforms that don’t natively support shadow DOM, such as some web browsers.