Shadow DOM is a web standard that provides encapsulation by hiding DOM subtrees under shadow roots. It provides a way for an element's DOM subtree to be encapsulated, or 'hidden', from the rest of the document. This is useful for isolating parts of an application to prevent CSS or JavaScript conflicts.
Shadow DOM Encapsulation
Shadow DOM provides an elitist mode of work for the components, i.e., whatever HTML/CSS they trap inside themselves, is secluded from the rest of the DOM tree. This is a significant advantage when it comes to using styles or scripts in your elements to carry out tasks. They don't interfere with other parts of the document or vice versa, and everything stays confined to its corresponding node.
How to create a Shadow DOM?
Creating a Shadow DOM involves invoking the 'attachShadow' method, obtaining a ShadowRoot, and appending child nodes to the ShadowRoot.
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(myParagraph);
Shadow DOM Modes
Shadow DOM hosts two modes: 'open' and 'closed'. If the mode is 'open', you can access the shadow DOM with 'element.shadowRoot'. But if it's 'closed', 'element.shadowRoot' always returns 'null'.
// Open mode
const shadowRoot = element.attachShadow({ mode: 'open' });
// Closed mode
const shadowRoot = element.attachShadow({ mode: 'closed' });
console.log(element.shadowRoot); // null
No Time to Read? Learn on the Go!
By reading this article, you've invested 0.91 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
Imagine you have a magic bag, where you can put toys, rocks, or anything you want. Others can see your bag, but they can't see what's inside the bag, unless you let them. The Shadow DOM is like your magic bag, but for web pages. It keeps parts of a website separate and hidden from the rest of the web page.
Why do we use Shadow DOM?
Just like you might want to keep your toys separate from your clothes, Shadow DOM lets web developers keep some parts of the website separate from others. This way, if you want to change something in one part, it won't mess with the other parts. It's like having different boxes for different types of toys.
How does Shadow DOM work?
Shadow DOM works like a hidden layer. Imagine we have a tree, and in the tree, we have a secret tree house that is hidden from people unless they know it's there. Just like this, in a website 'tree', Shadow DOM keeps parts hidden unless you specifically look for them.
A simple example of Shadow DOM
Imagine you have a Lego castle. You can change the design of your castle without affecting the Lego table it's standing on or the rest of the Lego world. Shadow DOM lets web developers do the same thing on a web page.
<host>
#shadow-root (open)
<slot>
</host>No Time to Read? Learn on the Go!
By reading this article, you've invested 1.15 minutes of your life into expanding your knowledge and perspectives. Now, imagine learning on-the-go, turning every moment into an opportunity for growth and discovery.
To learn more about DOM and how it works, you can read our article about Document Object Model (DOM)
About author
Roman Y.
Senior Software Engineer at Nike
EXCLUSIVELY
Certain articles only distributed to subscribers through email