[Bug]: Constructed stylesheets not recorded or rebuilt with rrweb-snapshot

[skitterm]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb-snapshot

Version

v2.0.0-alpha.17

Expected Behavior

I'd expect rrweb-snapshot to capture styles that came from constructed stylesheets, and for it to also rebuild those back out into constructed stylesheets.

Actual Behavior

rrweb-snapshot isn't serializing or rebuilding styles from constructed stylesheets.

We use rrweb-snapshot directly (not the top-level rrweb package). Unfortunately, styles from constructed stylesheets (as many web component frameworks implement them) aren't getting snapshotted or rebuilt.

I believe this is happening because such styles are in document.adoptedStyleSheets instead of in <style> tags, so they get overlooked.

Steps to Reproduce

1. Go to this page for an example of constructed stylesheet (paragraph text is red)
2. Go to this page (same code, but using rrweb to snapshot and rebuild). Notice the paragraph text is not red as the constructed styles are not getting snapshotted or rehydrated.

Testcase Gist URL

No response

Additional Information

I believe the quickest solution would be reading document.adoptedStyleSheets into some property at rrwebSnapshot.snapshot()-time, and deserializing them back to document.adoptedStyleSheets in rrwebSnapshot.rebuild() . If this solution sounds good, I'd be happy to submit a rough PR with the potential fix.

I noticed a PR (#989) went in for constructed stylesheet support to rrweb awhile back. Perhaps the same logic can be applied to the rrweb-snapshot code? Or was it intentional that constructed stylesheet support was not also done at the rrweb-snapshot level at that time?

[skitterm]

@Yuyz0112 @Juice10 I've forked this repo and have constructed stylesheet support working for shadow DOM; I'll create a PR in the next few days; I'd love your review on it once it's ready!