When viewing a replay, you always want to have as much information as possible to understand the full user experience. With DOM and shadow DOM support, you know that you have the full picture of each replayed session.
Replaying sessions with shadow DOM is seamless. When shadow DOM capture is enabled in the SDK, shadow DOM elements are included and rendered in the recorded session. With support for Shadow DOM elements, you know that Tealeaf is capturing all of the elements possible to give you the entire picture of a user's experience on your site -- all elements are being captured from the HTML.
To view the Shadow DOM code, simply select the Raw data view from the Replay. It will show you all of the elements of your DOM and Shadow DOM, so you can see what actions a user took on specific areas of your site.
Support for Shadow DOM capture was added to UI Capture SDK in April 2020. For information on how to enable Shadow DOM capture, see the UI Capture release notes.
Note: Shadow DOM is not supported by Acoustic Overstat.
What is the DOM?
The Document Object Model (DOM) is the data representation of the objects that make up the structure and content of a document on the web for XML or HTML documents. It shows how your document is structured and what elements of the document should go in what places.
You can think of it as a tree with organized branches. The HTML is the trunk of the tree, and each branch is an HTML element. An element can be a header, paragraph, list, etc. The DOM allows you to add, delete, and change content in an HTML document. The model is the specific way the elements can be laid out, for example, a paragraph can have a list within it. The DOM can be modified with a scripting language such as JavaScript, but is not dependent on any single coding language.
Here is a sample snippet of HTML, which can represent a DOM:
<!DOCTYPE html>
<html>
<head>
<title> My Page </title>
</head>
<body>
<h1> Mobile OS </h1>
<ul>
<li> Android </li>
<li> iOS </li>
</ul>
</body>
</html>
Here is the DOM tree representation of the HTML:
In the DOM, various parts of the HTML document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure, consisting of parent and child objects.
In DOM terminology, the individual parts of a document are referred to as “nodes”.
Read more about DOM here.
What is shadow DOM?
When you begin using Shadow DOM, you can think of the DOM as a grove of trees, and the Shadow DOM as individual trees, meaning that Shadow DOM is a subtree inside an element of the DOM. Use a Shadow DOM to customize component development. Developers can create and attach separate shadow DOM trees to elements in the regular DOM tree, as illustrated in the following diagram. These individual elements have their own HTML that is developed outside of the original DOM.
The self-contained and reusable nature of shadow DOMs are what make them so useful and popular with developers during site development. The customization of elements in the shadow DOM get applied in isolation, and does not affect any of the elements outside the shadow DOM. The CSS rules that apply to the document as a whole do not cross the shadow boundary. For example, let's say a developer is creating an app that requires a date picker component. The developer is more focused on the process flow for the app, and doesn't have time to create his own date picker component. So instead, he imports a date-picker component from a vendor into a shadow DOM. The shadow DOM encapsulates the imported component, allowing the developer to use it in his app without worrying about potential conflicts with the existing CSS or clashes with id's or component names in the DOM.
The shadow host is a node in the regular DOM tree that serves as a host for shadow DOM subtree. The shadow host is the node to which the shadow DOM tree is attached.
The shadow tree represents the shadow DOM content. It is the tree structure inside the shadow DOM.
The shadow boundary is the space between the DOM and the shadow DOM.
The shadow root is the root of the shadow DOM tree. It is the top-level directory for the shadow DOM. The shadow root can contain many shadow DOM sub-trees.
All of nodes in the shadow DOM can be altered by developers in the exact same way as nodes in the DOM. For example, developers can append children or set attributes, style individual nodes, or even apply a style to the entire shadow DOM tree inside a <style> element.
When a browser detects a Shadow DOM, it initiates the DOM subtree, which includes the HTML and any customized styling applied by the developer. As mentioned previously, the page-based CSS rules that apply to the regular DOM do not apply to the code inside the DOM subtree.
The browser renders the elements in accordance to the code and styling in the shadow DOM.
For more information about Shadow DOM, see Shadow DOM Concepts in the Polymer Project.