What is Light DOM?

LightDOM is the DOM tree along with ShadowDOM that defines the web component’s content. While ShadowDOM points to the main content of the component and it’s defined by the web component’s developer, LightDOM points to content that is not mandatory and it’s defined by the person who is consuming our web component.

When we use light DOM, our component lives outside the shadow DOM and avoids shadow DOM limitations. This approach eases third-party integrations and global styling. With light DOM, the component content is attached to the host element instead of its shadow tree. It can then be accessed like any other content in the document host, providing similar behavior to content that’s not bound by shadow DOM.

See below example of how content is rendered in Shadow and Light DOM.

Shadow DOM

<app-container-blue-shadow>
  #shadow-root (open)
  | <div>
  |   <b>Blue Shadow:</b>
  |   <span class="counter">...</span>
  |   <button type="button">Add one</button>
  | </div>
</app-counter-blue-shadow>

We can not directly access the shadow root element in our web component.

Light DOM

<app-container-blue-light>
    <div>
      <b>Blue Light:</b>
      <span class="counter">...</span>
      <button type="button">Add one</button>
    </div>
</app-counter-blue-light>

when the content of a component resides in the Light DOM, it can be accessed like any other content in the Document host, and thus behave like any other content.

Advantages of Light DOM:

Light DOM provides several advantages over shadow DOM.

• CSS theming and branding: Light DOM supports global styling, making it easy to apply custom branding to your components and child components. This is important while developing portal sites where we want to give same css styles to all pages.
• Third-party tooling and testing: With light DOM, third-party tools can traverse the DOM, enabling standard browser query APIs like querySelector and querySelectorAll, without traversing the shadow root.
• Accessibility: Light DOM doesn’t scope IDs and enables two separate components to reference an ID on the other. For example, <label for="my-input"> can reference <input type="text" id="my-input"> even if the elements are in separate components.

References:

Light DOM (Beta)

Other Question Posts:

What are Skinny Tables?

Queueable Vs Batch Apex In Salesforce

Salesforce Interview Question for Integration

Salesforce Apex Interview Question

Top 20 Salesforce Interview Question – Integration

Avoid Batch Apex and Use Queueable Class