What is Shadow DOM?

Shadow DOM is a way to implement encapsulation in HTML documents. By implementing this, you can hide the style and behavior of certain parts of the document and keep them separate by isolating them from other codes in the same document.

Shadow DOM allows you to connect hidden DOM trees to elements in a normal DOM tree. This Shadow DOM tree starts as a normal DOM, with a shadow root that can be attached to the required elements.

Recently Rate decided to implement Shadow DOM rendering using one of their products. RateX is a browser extension that allows users to make cross-border payments with minimal exchange rates. It also allows users to save more money by applying the latest coupon codes.

Therefore, the extension must interact with many e-commerce sites. Before implementing Shadow DOM, Many had an issue where the site’s CSS was interacting with the extension and crashing, interfering with how the extension was rendered. Now that the extension has started using Shadow DOM, this issue will no longer occur. If you want to learn more about using Shadow DOM, Rate Engineering will post about it in a few weeks.

However, there are other issues with using Shadow DOM. Specifically, how to implement automatic browser tests, how to handle Shadow DOM in selenium 4, using selenium one of the most common automated testing tools for web applications.

The problem is that Selenium does not explicitly support the use of Shadow DOM elements. For example, trying to find a Shadow DOM element in a WebDriver instance using the findElement function throws an exception indicating that the element was not found. Fortunately, there are easy ways to fix this problem.

Finding Shadow DOM Elements

Let’s continue the example targeting Shadow DOM elements. The first thing they need to do is find the shadow host, which is a normal node to which the shadow DOM is attached.

It’s as simple as using the findElement() function to place the element in the WebDriver instance itself. It then uses the executeScript() function to execute JavaScript code that can retrieve the ghost root using the old ghost host.

Now they created a Shadow root, which can use to find the Shadow DOM element they need. To do this, Many use the findElement() function, but instead of targeting the WebDriver instance as before, we target the WebElement phantom root.

An Explicit Expectation of Elements

But what if you want to wait for a Shadow DOM element to be placed/visible/activated using an explicit wait? Selenium has already provided a useful function to wait for these conditions to be met, which can be used with the wait() function of a WebDriver instance. Looking at Selenium’s implementation of Javascript bindings, most of these convenience functions work as Shadow DOM elements, just like Light DOM elements. You just need to pass the element obtained by the above function.

However, you will have to write your implementations for some convenience functions, mainly the element located and elements located functions. Indeed, these functions use the find elements() function on the WebDriver instance. This, as is known, does not work with Shadow DOM elements.

Do Not Neglect The Waiting Time!

In the meantime, Many want to derail a bit and emphasize the importance of testing browsers. Normally the browser hasn’t loaded the element yet, but the program finishes fetching the element, so a No Such Element Exception is thrown. This applies to Light DOM elements as well as Shadow DOM elements. However, with the introduction of the Shadow DOM element, it was first thought that a NoSuchElementException was thrown due to a problem getting the shadow root. It took a while to figure out that They needed to implement a wait to have time to load the element before the program could try to find it.

Therefore, it is recommended to use the findElement() function only when it is certain that the element is already loaded when calling the function.

In Conclusion

Maybe Selenium will eventually support Shadow DOM. In the meantime, we hope this guide will help you avoid the issues you’ve encountered with Selenium and Shadow DOM.

FAQs

• What does Shadow DOM help?

Ghost domain image result in Selenium

Shadow DOM allows you to connect hidden DOM trees to elements of a normal DOM tree. This Shadow DOM tree starts like a normal DOM, with a shadow root that you can connect any element too.

• What are Shadow DOM and Light DOM?

In Shadow DOM, CSS styles defined in parent components do not apply to child components. In contrast, in the lightweight DOM, you can find and style DOM nodes by setting styles in the root document. The following styles for native shadow components are cascaded into the light DOM of the child component.

• Which frameworks use shadow DOM?

– With the use of the shadow DOM, most frontend development companies are designing their UI with well-known libraries and frameworks such as React, Vue, AngularJs Development, etc

• How to inspect Shadow DOM?

The procedure for doing this is as follows.

• Open any Dart project in Chromium Embedded.
• Press F12 to open Developer Tools.
• Click the gear icon in the upper right corner.
• Enable the Show Shadow DOM option under the element category.

Go to the Elements panel and you will see the DOM component with all the styles.