Introduction to the Shadow DOM

The shadow DOM is a standard Web API, allowing that some parts of the DOM that is generated when rendering a Web page are isolated from the other parts of the page.

This specification is part of the Web Components framework, and there applied to LWC.

When using LWC, every component is encapsulated using a shadow DOM by default, because the class LightningElementfrom where most of the LWCs created are inherited already implements the Shadow DOM concept.

export default class YourLwcComponent extends LightningElement {
...
}

The most important benefits of using LWC and the Shadow DOM are:

• Shadow DOM prevent cascading CSS Styles from the parent to the isolated component (but not for inherited).
• The events fired inside an isolated component do not cross the shadow boundary, that is the border that isolates (this can be tweaked by the way).
• Other external elements can’t access and modify your component, leaking information for instance.

As you can see those benefits can be summarized in 2: Security and Encapsulation.

Vocabulary used

• Shadow host: is the parent component of the shadow down child element.

• Shadow root: is the first element of the shadowed component.

• Shadow tree: the internal DOM structure**.**

• Shadow boundary: is the line between the shadow root and the host element. It’s where the shadow DOM ends and the regular DOM begins. Think about it as the borders surrounding the element.

  <div> <-- The **Shadow host, let's say it's the parent component for the root**
  	<c-your-lwc-component>  <-- This is the **shadow root, inside the host,** and all elements inside is the **shadow tree** 
  			<div>
  		    <p>Your To Do List</p>
  	    </div>
  	</c-your-lwc-component> <-- **Shadow boundary** ends here
  </div>
  

<aside> ☝ You may hear in old blog/videos posts about the synthetic polyfill, from 2023 this is not relevant anymore (this was used by Salesforce to apply the LWC DOM shadowing to old browsers).

</aside>

It might be useful to activate this setting in the Developer Tools if you use LWC OSS on your browser of choice, but not in LWC custom development:

Querying the DOM