Feat: Add support for replaying :defined pseudo-class of custom elements

[YunFeng0817]

Some websites use :defined pseudo-class for custom elements, e.g. https://store.google.com/us/product/pixel_7?hl=en-US
In the previous implementation, we don't define any custom elements during the playback so all :defined styles are not applied.
In this pull request, I add the support for replaying :defined pseudo-class of custom elements.

Replayer before this PR:

Replayer after this PR:

[changeset-bot]

🦋 Changeset detected

Latest commit: 8cb6266

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
rrweb	Patch
rrweb-snapshot	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/types	Patch
@rrweb/web-extension	Patch
rrvideo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Juice10]

This is great @YunFeng0817! One thing I’m wondering is if CustomElementRegistry.define() was never called during recording time this might lead to unexpected behavior. Maybe we should monkeypatch CustomElementRegistry.define() to make sure these are accurately captured

[YunFeng0817]

Good suggestion. Do you think it's OK to change the data structure SerializedElement to this

export type elementNode = {
  type: NodeType.Element;
  tagName: string;
  attributes: attributes;
  childNodes: serializedNodeWithId[];
  isSVG?: true;
  needBlock?: boolean;
  isCustom?: boolean; // determine whether this is a defined custom element
};

[Juice10]

@YunFeng0817 yes I think that works

[Juice10]

@YunFeng0817 I think I've found another edge case for you that currently isn't handled by this PR

• An element gets added to the dom eg. special-element (not yet :defined or isCustom
• After a couple seconds CustomElementRegistry.define() gets called and special-element is officially defined, triggering :defined styles

[Juice10]

This is really great! Thanks @YunFeng0817!

[Juice10]

Looks like you have a failing type check. When that's fixed feel free to merge this

[bruno-garcia]

Hey folks, any blockers to merging this? It does help! Sentry has cherry picked this fix into our fork.

[nafees87n]

Any blockers to this PR? We really need this fix