If your website uses Shadow DOM elements, Mouseflow can record them. If that's all you needed to know, read no further. But if you'd like a little more detail, let's start at the beginning:

What is the Shadow DOM?

Since the start of the web, one problem has annoyed web-developers around the world: how can you prevent one piece of code on a website from affecting other code. In technical terms, this is called encapsulation - a way of isolating code so that it only affects the desired elements.

For a fair while, the only way to achieve this on a webpage was to use iframes. While that worked, it was far from elegant and caused a myriad of other issues that needed to be addressed (including issues with load times, CORS and responsiveness).

Then Shadow DOM arrived on the scene, solving these problems. Developed from an inbuilt browser technique to load content in the background of the DOM, the sinisterly named Shadow DOM solved these issues, and brough true encapsulation to web developers. Since then, multiple frameworks have embraced this technology to offer clean and isolated web component technology to web developers.

How does Mouseflow record the Shadow DOM?
Mouseflow will treat a Shadow DOM element as any other element in the DOM. We capture the content of the Shadow DOM as part of our inital HTML snapshot - or as part of a DOM mutation event if the Shadow DOM is injected after the page is loaded. When we detect user events (clicks, scrolling, etc) in the Shadow DOM, those events will be tied to that particular target, and relayed in our playback and heatmaps as it would with any other element.

There's no need for any additional setup or configuration - we will detect, record and recreate Shadow DOM elements of out the box.

Any fine print?

While we offer full support for Shadow DOM elements, there is one important clarification. A Shadow DOM element can exist in two 'modes' - open and closed. As the name suggests, an open Shadow Dom can be accessed on demand by other processes on the page - like JavaScript, and in extension Mouseflow. Most of the Shadow DOM components out there fall in this category and can be recoreded fully as outlined above.

In contrast, a closed Shadow DOM is not accessible to any outside processes. By design, it's completely isolated from all other processes on the page. As such, it cannot be recorded by Mouseflow (or any other session replay tools).

Did this answer your question?