Shadow DOM ?
Automating Shadow DOM Elements — Part 1
According to W3C,
Shadow DOM is an adjunct tree of DOM nodes. These shadow DOM subtrees can be associated with an element, but do not appear as child nodes of the element. Instead the subtrees form their own scope. For example, a shadow DOM subtree can contain IDs and styles that overlap with IDs and styles in the document, but because the shadow DOM subtree (unlike the child node list) is separate from the document, the IDs and styles in the shadow DOM subtree do not clash with those in the document
DOM can be describe as a programming interface which supports HTML, XHTML, or XML document as a tree structure where each and every node is an object representing a part of the document.
Shadow DOM provides encapsulation for the JavaScript, CSS, and templating in a Web Component. So, Shadow DOM can be differentiate with DOM with 2 facts,
1. How the DOM is created or used
2.How it behaves when compares to the rest of the page.
Shadow DOM separates content from presentation so that it eliminating naming conflicts and also it improves the code expression.
Shadow DOMs are limited to the following HTML components:
article , aside , blockquote , body , div , footer , h1, h2, h3, h4, h5, h6 , header , main , nav , p ,section , span
Note : However, not all HTML elements can be turned into a shadow host. For example, if you use this technology on an image file, an error will occur and you’ll get an error message
In the Image — Shadow DOM Structured (Chrome Browser Download Page), Shadow host is — <downloads-manager> . In the coming article we will discuss more about shadow host and the shadow root and the way how to access the shadow DOM elements. Here in this article we are just focusing on giving a basic idea about the shadow DOM structure and the elements themselves.
Shadow DOM API is playing a major role in web components is encapsulation. Capability to keep the markup structure, style, and behavior hidden and separate the code from other code on the page (Ex: The advertisements playing in the background of a web page)so that different parts do not clash, also the code can be kept tidy and clean, can be mention as the key parts. By this it provides a way to attach a hidden separate DOM to an element.
There are some bits of shadow DOM terminology to be aware of
- Shadow host: The regular DOM node that the shadow DOM is attached to.
- Shadow tree: The DOM tree inside the shadow DOM.
- Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
- Shadow root: The root node of the shadow tree.
In order for a shadow DOM to be accessed from the outside using JavaScript, the status (shadow -root)needs to set “open.” If you set the status to “closed” instead, access to the hidden DOM is denied.
To access Shadow DOM elements with selenium, usual locators will throw ‘NoSuchElementException’. Therefore we have to use JavascriptExecutor execute() function. We will talk about this further with sample coding examples in the coming articles.
Most popular browsers now fully support shadow DOMS. So, if you want to design a certain component or a certain area of your website independently of document-wide styling instructions and structures, hidden DOMs can be mention as an excellent and easy-to-implement choice, especially when it comes to the complex projects.
- My next article would be focusing on how to create a sample automation test project using shadow DOM elements.