✨ Shadow DOM serialisation support

[itsjwala]

Shadow DOM is a critical part of the newer Web Component standard which is growing in adoption day by day. This shadow DOM is not captured in a Percy snapshot by our existing serialization methods. Hence, this PR adds support for capturing it.

Constraints

1. We can’t serialize the DOM if the shadow root is attached in closed mode since we don’t have access to the HTML that makes up the tree. We need the shadow root to be open.

2. Making it work across all browsers in the infrastructure.

3. Shadow DOM capturing only works if the user’s test browser is Chromium 90+

Implementation details

Below is summarised lifecycle of percySnapshot command (explained in detail here)

• Currently serialization of Shadow DOM is only possible by Declarative Shadow DOM API provided by the browser.
  • The APIs are currently somewhat stable in chromium, but there is no sign of their adoption in Firefox. (ref https://caniuse.com/declarative-shadow-dom)
  • Method we're trying to work with is getInnerHTML (We've not polyfilled this method for Firefox)
• Once serialized the #shadow-root (open) are converted into <template shadowRoot="open"> tags
• We can then pass this dom snapshot across the wire in our infrastructure browsers to load the Shadow DOM.
• Though Declarative Shadow DOM and its API are still not supported Firefox/Safari, and thus we need to deserialize this Declarative Shadow DOM back to its original form.
  • We inject a custom polyfill for Declarative Shadow DOM which does this job.

[c69-addepar]

Confirmed:

• percy/cli 1.19.2 and percy/ember 4.0.2 fix our issues.

Thank you, team !

[mmun]

Thanks again @itsjwala and @samarsault for your work. I hope it brings additional value to all your customers!

By the way, Safari announced recently that their technical preview has enabled declarative shadow DOM APIs by default. I'm not sure if this includes the getInnerHTML({ includeShadowRoots: true }) API though. In any case, there's hope that we'll one day have support for this Percy feature across all browsers.

[itsjwala]

@mmun yes we're keeping an eye on this development for Safari, though it would be particularly be helpful for browsers in infrastructure (we only support chrome/firefox as a test browser so serialization point of view we want Firefox to pickup this development soon)

For now, declarative shadow DOM polyfill - ref is working for Firefox, Safari, and Safari on iPhone platforms in our infrastructure. (we hope to get rid of this polyfill in future 🤞)