Further enhancing our recorder’s support for Shadow DOM and Web Components, our latest versions for both the player (v1.5.2) and the recorder (v1.8.2), include support for native shadow root nodes.

Since our first release, these technologies have matured and been embraced by the majority of the browsers. Thus, it is safe enough to employ them, having the ultimate goal of offering more accurate recordings to our customers.

Previously, for the recordings to be viewable in any browser, the direction we had taken can be summarised in the following two key points:

  • Transpile stylesheets in shadow roots using the ShadyCSS polyfill at runtime
  • Flatten the DOM

In practice, the above approach didn’t always produce accurate recordings because the CSS transpiling process involved inevitably modifies the CSS rules specificity.

With our new implementation, no CSS transpiling is required. The player will attach shadow roots to host elements and insert the styles inside them while at the same time ensuring backward compatibility.

Although we support adopted stylesheets, we do not support dynamic modification of these stylesheets using the CSSStyleSheet.insertRule() API.

Here is the same Polymer shop demo recorded with our latest recorder:

And here is another recording from the UI5 Web components library that utilizes adopted stylesheets: