Why use shadow DOM?

Shadow DOM

Traditionally, DOM encapsulation issues have been solved using iframes. Putting all the banner code in an iframe will protect it. This solution solves one problem but may cause others. In fact, there is a simple and sophisticated solution to the encapsulation problem and its name is Shadow DOM. This is a set of standard APIs that allow you to wrap parts of the DOM inside the DOM of an HTML page. This allows you to create a sort of private DOM for your HTML elements. In other words, it enables local DOM over global DOM, like global and local variables.

Why use shadow DOM?

Encapsulation is an important aspect of web components. This is the ability to hide the markup structure, style, and behaviour from the rest of the code on the page. It will keep the code clean without conflicting with different parties. The Shadow DOM API is an important part and provides a way to attach a hidden detached DOM to an element. This article explains the basic usage of Selenium 4 Shadow DOM. Shadow DOM allows you to connect shadow DOM trees to elements of a normal DOM tree. This Shadow DOM tree starts out like a normal DOM, with a shadow root that you can connect any element too.

There are a few Shadow DOM terms to be aware of:

Shadow Host: A normal DOM node to which the Ghost DOM is attached.

Shadow tree: the DOM tree in the Shadow DOM.

Shadow Bounds: Where Shadow DOM ends, where normal DOM begins.

Shadow Root: the root node of the shadow tree.

Shadow DOM nodes can be affected in exactly the same way as unhidden nodes. For example, add child nodes, set properties, and style individual nodes as a.style.for element, or style the entire shadow DOM tree as a < > element. The difference is that code in Shadow DOM can be easily encapsulated because it doesn’t affect the outside world.

Shadow DOM is nothing new. Browsers have long been used to encapsulate the internal structure of elements. For example, consider the <video> element which exposes default browser controls. The DOM only displays the <video> element and the shadow DOM contains a set of buttons and other controls. The Shadow DOM spec already does this, so you can actually manipulate the Shadow DOM of your own custom elements.

Why Shadow DOM matters

Shadow DOM is a browser technology for qualifying variables and CSS in web components. First of all, the DOM is an object, and you can’t do everything you need with an object unless you cross the boundaries that you want to isolate. In other words, encapsulation is possible in Shadow DOM. In other words, by hiding the structure, style, and behaviour of your markup separately from the rest of the code, you can avoid conflicts.

A lot of interesting things happen when the browser loads a web page. One of these tasks is to convert the author’s HTML code into a live document. By default, browsers parse HTML (static text strings) into data patterns (objects/nodes) to understand page structure. The browser maintains the HTML hierarchy by constructing the DOM, which is a tree of these nodes. The beauty of DOM is that it allows you to present pages in real-time. Unlike static HTML, browser-generated nodes contain properties and methods, and most importantly…you can work with them programmatically! You can create DOM elements directly using JavaScript. That’s the reason. Shadow DOM is designed as a tool for building component-based applications. Therefore, it provides solutions to common web development problems.

DOM Separation: A component’s DOM is self-contained (e.g. document.querySelector() does not return a node in the component’s shadow DOM).

Delimited CSS: CSS defined in Shadow DOM is delimited there. No style rule leaks or page styles penetrate.

Composition: Design markup-based declarative APIs for components.

Simplified CSS: Extended DOM means you can use simple CSS selectors, and more generic ID/class names, without worrying about naming conflicts.

Productivity: Think of your application as a block of DOM rather than a large (overall) page.

Author BIO

Rahul Sakthi is working at Devstringx Technologies, a top web & mobile app development company in Noida for the last 01 decade. He has 05 years of experience in manual & automation software testing. He is a technical expert, a passionate writer, and a seasoned IT professional. He enjoys connecting with people, keeping himself updated with the latest in the field of business, and technology.