Further enhancing our 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 most browsers have embraced them. Thus, employing them is safe enough, with 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. Our new implementation does not rely on any CSS transpiling. The player will attach shadow roots to host elements and insert the styles inside them while at the same time ensuring backward compatibility.
We fully support adopted stylesheets when recording the session using our JavaScript snippet or the Chrome extension. As of lately, the Firefox extension cannot access the document’s and shadow roots' adopted stylesheets because of this bug. It is also worth noting that 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 version:
And here is another recording from the UI5 Web components library that utilizes adopted stylesheets: