CONTACT US
Product Updates · 5 min read

FullStory now supports Shadow DOM

Joel Webber
Posted July 18, 2019
FullStory now supports Shadow DOM

One common question we hear from FullStory customers is:

Do you support Web Components?

The truth is, when it comes to simple web components, the answer to this question is "yes" and it has been "yes" for quite a long time. Fundamentally, FullStory's session replay works by recording DOM mutations on the page. So, we're able to record changes to web components in the same way that we'd record changes to all other basic HTML elements in a browser. You can read more about the DOM and how session replay works in our Definitive Guide.

Recently, it's become popular for developer frameworks to nest something called a "Shadow DOM" within custom web components. Shadow DOMs are useful because they are reusable, configurable custom elements that don’t clash with any other CSS or JavaScript on the page.

Historically, FullStory was unable to capture content within Shadow DOMs.

But now we can.

Why We Built Shadow DOM Support for FullStory

In order to improve customer experiences on the web, you need to deeply understand a customer's end-to-end experience. And in order to deeply understand a customer's end-to-end experience, you need a complete picture of their behavior—preferably one that is built from the ground up while also capable of being analyzed from the topdown.

Replaying a customer's online experience in FullStory gives you that ground truth. And where FullStory goes further is by enabling you to measure and analyze customer interactions with specific elements in aggregate.

For FullStory's unique qualitative and quantitative approach to function, it's critical we continuously adapt our recording capabilities to support popular technologies. As we saw more and more developers adopting modern frameworks that rely on web components and Shadow DOM, we knew it would be important to close the "blind spots" in the data for those customers ... that is, if it was possible.

Well, as it turns out, it is possible—so, we did it.

What the Tech?

At this point, you're probably thinking either:

  1. "Excellent, this blog post answered my question about whether FullStory supports Shadow DOM and I'm ready to move on with my day" or

  2. "I have absolutely no clue what you're talking about, Joel."

If you find yourself in camp B and you're also curious to learn more, I'd invite you to read for a bit more about how the technology works.

Web Components 101

“Web Components” is a general term that refers to the practice of creating reusable, custom HTML elements.

For example, instead of using a semantic, standard HTML element such as a <p> tag (paragraph) or <div> tag (container), you could create your own custom HTML element such as a <joels-awesome-special-module-thingy> and let that represent a specific type of component on your website or web app.

By default, the browser treats those custom HTML elements like they'd treat any regular HTML <div>. As we mentioned earlier, for simple web components that are custom elements but don't employ the Shadow DOM, FullStory has long been able to record those elements in the same way that we'd record all other basic <div> elements in a browser.

What we did in our most recent recording upgrade was extend the ability to record the Shadow DOM elements nested within those custom web components.

Why Use Shadow DOM

Shadow DOMs are useful because they are self-contained and reusable. They allow developers to write code and styles for a part of a webpage in isolation without conflicting with rules that affect the rest of the page styles.

Here's How Shadow DOMs Work

When a web component includes a Shadow DOM, the browser initiates a special little DOM subtree that can include HTML, CSS, and other code that's specific only to that web component. Similar to how page-level CSS style rules can't apply to code within an iframe (because they can't "reach" that code to modify it), style rules in the containing/host page can't apply to code within a Shadow DOM's subtree.

In this Polymer example <shop-list-item> is the custom HTML element and they're using nested Shadow DOMs, marked by #shadow-root (open)

But, unlike content loaded via iframes, web components with Shadow DOM are much more lightweight and performant. They also work much better at scale. Components can easily fit within the page where they're rendered instead of being hosted at many different unique locations.

For this reason, lots of popular web frameworks such as Angular and React have begun supporting web components with Shadow DOM as part of their libraries. We're also seeing developers take up web components as a way of implementing design systems.

(For more on Shadow DOM, check out the Shadow DOM spec and explainer.)

What Shadow DOM Recording Means For You

If you're already a customer of FullStory, you shouldn't notice much of a change: Expect FullStory to record the web components on your website or web app as well as any nested elements within them.

However, if you tried FullStory in the past and were disappointed to find that we couldn't support your Shadow DOM setup, we hope you'll give us another try. We're constantly working to expand the list of interesting web things that FullStory can record.

Got questions about Shadow DOM or any other aspect of our recording technology? Email us at support@fullstory.com. We'd love to hear from you.

Author
Joel WebberCofounder & Engineering

About the author

Joel Webber is a Co-Founder and Chief Architect at FullStory. He is based in Marietta, Georgia.

Return to top