If you build or manage websites that rely heavily on transaction monitoring technology, then you are probably acutely aware that as these applications grow, they often encounter brittleness based on interactions between HTML, CSS, and JavaScript coding. Fortunately, developers have arrived at a solution to circumvent these problems in the form of shadow Doms.
If your page contains lots of complex web components, such as date pickers, shopping carts, login forms, or rating systems, it can be advantageous to isolate and encapsulate these HTML, CSS, and JS elements within shadow DOMs to avoid conflicts with the main page. Shadow DOMs inherent isolation from other web components has many benefits that support page stabilization, but they can also create conflicts for transaction monitoring.
Fortunately, as your web apps become more complex, Uptrends now offers a support solution to help keep your site running at peak performance. You can now identify and configure Uptrends’ Transaction Monitors to keep an eye on shadow DOM elements whether authored in-house or by third-party vendors.
Shadow DOM versus DOM
Before describing what a shadow DOM is, why it may be embedded within a website, and why it’s important to monitor, it is best to first describe its relationship and role within a Document Object Model (DOM) tree.
A DOM is basically a representation of individual elements in markup documents, like HTML documents used to build web pages. As the web page loads, the browser constructs a DOM based on the specifications of the HTML document, with each element arranged in a structure resembling a tree.
Any changes made to the DOM will result in changes to how the web page is displayed in the browser. However, temporary changes can be made to the web page while in the browser window using JavaScript, for example. The DOM for any given page can be viewed in the browser’s Developer tools — typically accessed by pressing F12.
Shadow DOM is a form of encapsulation. Think of it as a DOM tree — along with all of its elements and styles — within another DOM. The shadow DOM loads content behind the DOM, isolating its own code such that it impacts only certain elements and avoiding conflicts with the page’s foundational code.
A shadow DOM is structured the same way as a regular DOM, but is attached to a shadow host, a node within the regular DOM. Since a shadow DOM is a separate ‘tree within a tree,’ none of the code inside it can affect any of the nodes in the regular DOM, and vice versa.
The inherent nature of a shadow DOM comes with key benefits (CSS scoping, DOM encapsulation, composition) along with allowing developers greater creative freedom. But shadow DOMs also create challenges for automation testing because elements inside a shadow root technically don’t exist in the main DOM.
Shadow DOMs are often embedded as code in clickable buttons that many websites use for various purposes. Until recently, it wasn’t feasible to monitor what happens when those buttons are clicked. If your business or site setup relies on these types of interactive elements to enable multiple forms of transactions, it becomes easier to see the need for adequate transaction monitors able look inside that shadow DOM rather than the main document DOM.
Uptrends Transaction Monitoring can provide that peek inside shadow DOMs, especially ones created by third-party vendors, the prevalence of which is increasing on websites and the reliability of said add-on elements that must be trusted.
Configuring shadow DOMs for transactions
The interactions within a transaction script act upon the nodes in the page DOM. Keep in mind that because a shadow DOM is separate, a transaction monitor must be configured to look inside that shadow DOM rather than the main document DOM.
Uptrends offers a straightforward solution for configuring its Transaction Monitor to look inside the shadow DOM as opposed to the main document DOM.
If the transaction needs a step that fills in a value into the text field, we’ll need to tell the transaction explicitly that it has to look inside the shadow DOM.
Nested shadow DOMs
Sometimes a shadow DOM will be nested within another shadow DOM. You can easily configure your transaction for this scenario by adding another nested shadow DOM host and entering the shadow DOM selectors in the order in which they appear.
Once that’s done, you can go into the transaction script editor and add any additional values to the shadowRoots array. Once that has been set up, you’ll be able to see the monitoring data in dashboards for easy analysis.
The takeaway
Shadow Dom usage is growing significantly and is currently supported in Safari, Firefox, and Edge in addition to Chrome.
If your business relies heavily on transactions using shopping carts, user log-ins, or you are using a third-party application for some type of content, you’re going to want a monitoring solution that can handle the shadow DOM-based elements so they don’t clash with your page’s foundational code or have unintentional consequences.
Schedule a demo with an Uptrends expert who will walk you through everything you need to know about Uptrends Transaction Monitoring and the support for shadow DOM.
