What is Shadow DOM ? How To Get Shadow Root Element in Javascript

What Is Shadowroot DOM?

When ever we open any webpage in browser it creats a DOM tree which generates our HTML page which is know as normal DOM and shadow DOM is the hidden DOM inside main DOM which dosen’t have any impect of style and desing of its outer DOM. It Is completely isolated from the rest of the document. Today we will learn how we can access shadow dom element we can able to see how javascript get shadow root element and manupulate the Dom of the shadow root, the shadow dom we can see in dom tree under #shadow-root and we can able to access the access shadow dom element

so we can achive it by queryselector shadowroot please read the full article to access the #shadowroot

Why Is Shadow Dom Needed

Independent

shadowroot html, Supose in a single project we are working with defferent frame work like bootstrap, ui elements, or other css frame work, so shdow DOM wil isolate perticuler component with their targeting css framework eg. if header is made with bootstrap , footer is made with meterial UI, and some popup is ther with other css framework , So by implimenting shadow DOM we can restrict the component with same classes and merging its styles with different elements.

Reusable

Reusability is another significant benefit that Shadow DOM brings to web development. A component built with Shadow DOM encapsulates all its required styles and behaviors, making it a self-contained unit. This means you can reuse this component across different parts of your application or even across different applications.

How To Create Shadow DOM Elementsscript With Javascript

Creating shadow DOM: Once you have chosen the element that you want to use to host your Shadow DOM, you have to attach the Shadow DOM to it. Please see the snippet below. create shadow dom

<header></header> 

<script> 
  const domShadowRoot = 
     document.querySelector('header')
            .attachShadow({mode: 'open'}); 
</script>

There are two limitations:

1. Per element will allow only one Shadow Root.
2. The Element must be either a custom element, or one of: “blockquote”, “body”, “div”, “article”, “aside”, “footer”, “h1…h6”, “header”, “main” “nav”, “p”, “section”, or “span” and Other elements, like <img>, can’t host shadow tree.

The mode option is used to set the encapsulation level. It must follow any of two values:

• “open” – open means that you can access the shadow DOM using JavaScript.
• “Closed” – open means that you can’t access the shadow DOM using JavaScript and can’t do DOM manupulation.

Append Element to DOM Shadow Root

Below code domShadowRoot refrence is taken from above code.

const injectedEle = document.createElement('p'); 

injectedEle .innerHTML = 
'This is a Shadow DOM paragraph'; 
    
domShadowRoot.appendChild(injectedEle);

Find Shadow Root Element In DOM

var shadowRootEle = document.querySelector("header").shadowRoot;

With all the above method we can able to create and find shadow root element. If you find any issue you can comment below will try to help you.