Specific node snapshot

[VladimirMilenko]

I think it could be a nice idea to make a specific node snapshot, this is especially useful for #104 related things.

In some sense it could be implemented like this:

const someObject = new SomeClass({
  onEvent: (changedNode) => {
    rrweb.snapshot(changedNode);
   }
})

This is mostly helpful for cases, when changes are not tracked by mutation observer and are changing the inner props of the node, like CSSStyleSheet on style node.

[Yuyz0112]

@VladimirMilenko Agree with that! BTW, snapshot a specific node will unlock the potential of rrweb-snapshot which can do a lot of things.

Currently, the concern is the first argument of snapshot actually has two semantic:

1. The document object of the scope.
2. The root node.

Maybe we need to separate it into two arguments, one for the document object and the other one for the root node which is optional. When the root node was not passed in, it will use the document node as a default value.

But the API of rrweb.snapshot is a little poor at this moment, which cannot extend another argument after document node. Maybe I need to update the API into an object-style argument and release a new minor version for rrweb-snapshot.

[Yuyz0112]

The most tricky part of this feature is about CSS styles.

For example, if the DOM looks like this:

html
  body
    div #1
    div #2

and some style sheets like this:

body > div {
  background: grey;
}

div:nth-child(2) {
  color: white;
}

And we only record div#2, then all the style sheets will not be applied to the recorded div#2.

[randy-johnson]

I would be willing to live with that. It could be easily documented. Now I have to do some trickory like search / replace a classname in the player HTML before it plays to remove the divs. It works fine but it would be nice to be able to record the div that we want.

[romain130492]

Any update on this? 😀