Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
skitterm opened this issue Sep 11, 2024 · 1 comment
Open
1 task done
Labels
bug Something isn't working

Comments

@skitterm
Copy link

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 skitterm added the bug Something isn't working label Sep 11, 2024
@skitterm
Copy link
Author

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant