Refresh Parent Flex Card Using Omni Script Action

on
1

Shadow DOM in Web component

on

 While working with web components you must heard the word shadow DOM.  Here we will understand what is shadow DOM and the concepts of it. and How it is different in LWC. So here we go :)


What is shadow DOM?
Shadow DOM is a web standard. It provides encapsulation of  the internal DOM structure so outer component cant access the elements of internal DOM as well as styles don't leak from parent to child component. 
In this respect, the shadow DOM works sort of like an <iframe> where the content is cut off from the rest of the document; however, when we create a shadow root, we still have total control over that part of our page, but scoped to a context. This is what we call encapsulation.

Vanilla Web Components vs LWC

In vanilla web component we have to attach the element to shadow DOM. Below is the code.
Index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pop-up</title>
    <script src="main.js" defer></script>
    <style>
        h1{
            color : red;
        }
    </style>
  </head>
  <body>
    <h1>Pop-up info - Light DOM</h1>
    <div>
    <popup-info ></popup-info>
    </div>
  </body>
</html>
main.js
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();
    // Create a shadow root
    const shadow = this.attachShadow({mode: 'open'});
    // add header tag
    shadow.innerHTML = '<h1>Pop-up info - Shadow DOM</h1>';
  }
  
  connectedCallback() {
    console.log(this.shadowRoot.querySelector('h1'));
  }
}
// Define the new element
customElements.define('popup-info', PopUpInfo);
here we have to attach custom element to shadow DOM in constuctor() and the console in connectedCallback() only return the h1 of shadow DOM. And styling which applied on h1 tag will only apply to same component. h1 inside shadow DOM will not get impacted due to CSS isolation.

In LWC, It automatically attaches a Shadow Tree to guarantee encapsulation of components and no additional code is required to attach it to shadow DOM.
class PopUpInfoLWC extends LightningElement {  
  connectedCallback() {
      console.log(this.template.querySelector('h1'));
  }
}
Benefits of shadow DOM : 
  1. Ability to share the component.
  2. Isolation of component from outer CSS, HTML and JS.
  3. CSS style apply to document are not going to leak into shadow boundary.
  4. By default Events that fire from inner elements are not going to escape shadow boundary unless it is configured to do so.
Some browsers don't support native shadow DOM yet so LWC uses shadow DOM polyfill. A polyfill is code that allows a feature to work in a web browser.

Different terminologies of shadow DOM : 
  1. Shadow host: The regular DOM node that the shadow DOM is attached to.
  2. Shadow tree: The DOM tree inside the shadow DOM.
  3. Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
  4. Shadow root: The root node of the shadow tree.


The Shadow DOM have three primary effects:

  1. DOM access : 
    1. Access Elements : In shadow tree elements can only accessible via template property i.e. this.template.querySelector(); or this.template.querySelectorAll(). and code can't use document and document.body to access shadow tree elements. 
    2. Access Slots : A component doesn’t own DOM elements that are passed to it via slots. These DOM elements aren’t in the component’s shadow tree. To access DOM elements passed in via slots, call this.querySelector() and this.querySelectorAll().
  2. CSS isolation : CSS styles defined in a parent component don’t leak into a child.
  3. Event propagation : 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. this is called event retargeting.
References :

Comments

Post a Comment