Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Document Object Model (DOM)
3.
Document Object Model Tree
4.
Web Components
4.1.
Shadow Document Object Model
4.2.
Building the Shadow DOM
4.3.
What is Shadow Root
4.4.
Creating Shadow DOM
4.4.1.
Limitations
4.5.
Adding Styles to the Shadow DOM
5.
Frequently Asked Questions
5.1.
What is shadow root in JS?
5.2.
Does shadow DOM boost efficiency?
5.3.
Why do we use DOM?
5.4.
What does HTML5's shadow DOM mean?
5.5.
What does the DOM shadow example mean?
6.
Conclusion
Last Updated: Mar 27, 2024
Medium

What is Shadow root?

Introduction

This article will discuss what is shadow root by covering the topics DOM, DOM Tree and Web Component.

Introduction

A document fragment connected to the host element by a host property that identifies the host element is known as what is shadow root. The attachment of a shadow root provides the component with its shadow Document Object Model. Now from here, we will focus on what is shadow root.

Also Read, Javascript hasOwnProperty

Document Object Model (DOM)

Web documents include a programming interface called the Document Object Model. It acts as a representation of the page so that software can change the document's structure, appearance, and content. Programming languages can connect with a page by interacting with the nodes and objects that the DOM uses to represent the content.

Document Object Model (DOM)
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Document Object Model Tree

A web page's HTML code is converted into a data model composed of "Objects" and "Nodes," as well as a "DOM Tree" that establishes the web page's structure when a browser loads a particular webpage.

DOM Tree:

HTML
     head
       title
         Web Components
     body
        h1
         Coding Ninjas

Web Components

There are four web Components. But in this post, Shadow DOM will be the main topic of discussion.
 

  • Shadow DOM
     
  • HTML Templates
     
  • Custom elements
     
  • HTML Imports
     
Web Components

Shadow Document Object Model

Shadow DOM eliminates the fragility of creating web apps. Due to HTML, CSS, and JavaScript's global nature, they are brittle. 

For encapsulation, shadow DOM is employed. The Shadow DOM enables a component's author to create a unique, independent DOM that is not a part of the main DOM. As a consequence, any Javascript and CSS created for the new DOM may be suitably encased, and the results are shielded from CSS in a global field unless the component authorises it.

Building the Shadow DOM

Although it is typically concealed from us, the DOM's structure is visible in developer tools. The "Show user agent shadow DOM" option in Chrome's Dev Tools, for example, has to be activated.
 

<!DOCTYPE html>
<html>
 <head>...</head>
 <body> == $0
  <img src="./assets/images/faded.jpg" id="background">
  <audio src="../assets/music/faded.mp3" id="song">
   #shadow-root (user-agent)
  </audio >
  <div class="container">.</div>
  <script src="player.js"X</script>
 </body>
</html>

 

Here the #shadow-root is the Shadow DOM.

Regular JavaScript selectors or calls cannot access built-in shadow DOM elements. These aren't typical kids; rather, encapsulation has been used effectively.

What is Shadow Root

So the question is, what is shadow root? A shadow root serves as the root of a shadow tree, which is a node tree. Through its host, a shadow root is always linked to another node tree. As a result, the shadow tree is never by itself. The node tree of the host of the shadow root is sometimes referred to as a "light tree."

Shadow DOM enables the attachment of hidden DOM trees to the components of a conventional DOM tree.

There are a few terms related to shadow DOM that you should be familiar with:

  • Shadow Host: The object with which you decide to begin a new Shadow DOM.
     
  • Shadow Tree: The node tree is the tree of the shadow DOM within.
     
  • Shadow Boundary: The standard DOM starts here and finishes where the shadow DOM stops.
     
  • Shadow Root: It serves as the shadow tree's root node.

Creating Shadow DOM

After deciding the element you wish to use to host your Shadow DOM, you must attach the Shadow DOM to that element. Please view the snippet down below.
 

<p class="highlight">Hey Ninjas</p>

<div id="Firstcomponent"></div>

<script>
  const shadowRootOne =
     document.getElementById('Firstcomponent')
            .attachShadow({mode: 'open'});
</script>

 

So, in this script, we first grab a div element with the id Firstcomponent, then call the attachShadow() method, which takes an object with the property mode as a parameter.

Limitations

  1. Per element, only one shadow root can be produced.
     
  2. The element must be a custom element or one of the following: "blockquote," "body," "div," "article," "aside," "footer," "h1—h6," "header," "main," "nav," "p," "section," or "span." Other elements, such as img>, cannot host shadow trees.

I suppose you have got your question’s answer, what is shadow root. From now we will try to understand Shadow DOM styles.

Adding Styles to the Shadow DOM

The Shadow Tree's styles are limited to the Shadow Tree and do not affect anything outside of it. Frequently, selectors inside the shadow tree do not match styles outside it.

A shadow DOM can be given style in 2 different ways. The simplest way to add the styles to the Shadow DOM is by calling appendChild on the Shadow Root, just like you would for any other element. The alternative method involves adding styles using the <template> element.
 

const styleElement = document.createElement('style');
styleElement.innerText = `
  .highlight {
      background: #FFA500;
      font-size: 6rem;
  } `;

shadowRootOne.appendChild(styleElement);

Practice it on an online javascript editor.

Frequently Asked Questions

What is shadow root in JS?

The root node of a Document Object Model subtree that is rendered separately from a document's main Document Object Model tree is the ShadowRoot interface of the Shadow DOM API. If an element was generated using Element, its Element.shadowRoot property could be used to retrieve a reference to its shadow root.

Does shadow DOM boost efficiency?

First off, our theory regarding style encapsulation is true—shadow DOM can enhance style performance. However, ID and class selectors are quick enough that using shadow DOM is not that important; they are a little faster without it.

Why do we use DOM?

The DOM is a programming interface for web documents (DOM). It acts as a representation of the page so that software can change the document's structure, appearance, and content. Programming languages can connect with a page by interacting with the nodes and objects that the Document Object Model uses to describe the content.

What does HTML5's shadow DOM mean?

The shadow DOM tree starts with a shadow root, beneath which you can attach any element, much like the conventional DOM, and allows hidden DOM trees to be attached to elements in the regular DOM tree.

What does the DOM shadow example mean?

So that document-level CSS, for instance, cannot unintentionally restyle the button, Shadow DOM enables you to arrange the children in a scoped subtree. A shadow tree is the name of this subtree.

Conclusion

This blog covered what is shadow root. I also covered the topics DOM, DOM Tree and Web Component. We have understood the concept of shadow DOM and what is shadow root. We also looked at some frequently asked questions. If you want to learn web development, go to our website Coding Ninjas Web Development.

Check out this problem - Duplicate Subtree In Binary Tree

Do check out our blogs on object-oriented programming and data structures
Don’t stop here. Check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.

All the best.

Previous article
DOM Manipulation in Javascript
Next article
Phases of JS Event
Live masterclass