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 brought 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 initial 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 out of the box.
Any fine print?
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).