@highlight-run/rrweb 2.0.6 → 2.0.9

package/lib/record/rrweb-record.js

@@ -16,7 +16,7 @@ function isElement(n) {
 function isShadowRoot(n) {
     var _a;
     var host = (_a = n) === null || _a === void 0 ? void 0 : _a.host;
-    return Boolean(host && host.shadowRoot && host.shadowRoot === n);
+    return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
 }
 var Mirror = (function () {
     function Mirror() {
@@ -316,7 +316,7 @@ function _isBlockedElement(element, blockClass, blockSelector) {
         }
     }
     else {
-        for (var eIndex = 0; eIndex < element.classList.length; eIndex++) {
+        for (var eIndex = element.classList.length; eIndex--;) {
             var className = element.classList[eIndex];
             if (blockClass.test(className)) {
                 return true;
@@ -328,35 +328,47 @@ function _isBlockedElement(element, blockClass, blockSelector) {
     }
     return false;
 }
-function needMaskingText(node, maskTextClass, maskTextSelector) {
-    if (!node) {
+function classMatchesRegex(node, regex, checkAncestors) {
+    if (!node)
         return false;
+    if (node.nodeType !== node.ELEMENT_NODE) {
+        if (!checkAncestors)
+            return false;
+        return classMatchesRegex(node.parentNode, regex, checkAncestors);
     }
-    if (node.nodeType === node.ELEMENT_NODE) {
-        if (typeof maskTextClass === 'string') {
-            if (node.classList.contains(maskTextClass)) {
-                return true;
-            }
-        }
-        else {
-            for (var eIndex = 0; eIndex < node.classList.length; eIndex++) {
-                var className = node.classList[eIndex];
-                if (maskTextClass.test(className)) {
-                    return true;
-                }
-            }
-        }
-        if (maskTextSelector) {
-            if (node.matches(maskTextSelector)) {
-                return true;
-            }
+    for (var eIndex = node.classList.length; eIndex--;) {
+        var className = node.classList[eIndex];
+        if (regex.test(className)) {
+            return true;
         }
-        return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
     }
-    if (node.nodeType === node.TEXT_NODE) {
-        return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
+    if (!checkAncestors)
+        return false;
+    return classMatchesRegex(node.parentNode, regex, checkAncestors);
+}
+function needMaskingText(node, maskTextClass, maskTextSelector) {
+    var el = node.nodeType === node.ELEMENT_NODE
+        ? node
+        : node.parentElement;
+    if (el === null)
+        return false;
+    if (typeof maskTextClass === 'string') {
+        if (el.classList.contains(maskTextClass))
+            return true;
+        if (el.closest("." + maskTextClass))
+            return true;
+    }
+    else {
+        if (classMatchesRegex(el, maskTextClass, true))
+            return true;
+    }
+    if (maskTextSelector) {
+        if (el.matches(maskTextSelector))
+            return true;
+        if (el.closest(maskTextSelector))
+            return true;
     }
-    return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
+    return false;
 }
 function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {
     var win = iframeEl.contentWindow;
@@ -423,13 +435,8 @@ function onceStylesheetLoaded(link, listener, iframeLoadTimeout) {
     });
 }
 function serializeNode(n, options) {
-    var _a;
-    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, inlineStylesheet = options.inlineStylesheet, _b = options.maskInputOptions, maskInputOptions = _b === void 0 ? {} : _b, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, _c = options.dataURLOptions, dataURLOptions = _c === void 0 ? {} : _c, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, enableStrictPrivacy = options.enableStrictPrivacy;
-    var rootId;
-    if (mirror.getMeta(doc)) {
-        var docId = mirror.getId(doc);
-        rootId = docId === 1 ? undefined : docId;
-    }
+    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy;
+    var rootId = getRootId(doc, mirror);
     switch (n.nodeType) {
         case n.DOCUMENT_NODE:
             if (n.compatMode !== 'CSS1Compat') {
@@ -456,203 +463,29 @@ function serializeNode(n, options) {
                 rootId: rootId
             };
         case n.ELEMENT_NODE:
-            var needBlock = _isBlockedElement(n, blockClass, blockSelector);
-            var tagName = getValidTagName(n);
-            var attributes_1 = {};
-            var len = n.attributes.length;
-            for (var i = 0; i < len; i++) {
-                var attr = n.attributes[i];
-                attributes_1[attr.name] = transformAttribute(doc, tagName, attr.name, attr.value);
-            }
-            if (tagName === 'link' && inlineStylesheet) {
-                var stylesheet = Array.from(doc.styleSheets).find(function (s) {
-                    return s.href === n.href;
-                });
-                var cssText = null;
-                if (stylesheet) {
-                    cssText = getCssRulesString(stylesheet);
-                }
-                if (cssText) {
-                    delete attributes_1.rel;
-                    delete attributes_1.href;
-                    attributes_1._cssText = absoluteToStylesheet(cssText, stylesheet.href);
-                }
-            }
-            if (tagName === 'style' &&
-                n.sheet &&
-                !(n.innerText ||
-                    n.textContent ||
-                    '').trim().length) {
-                var cssText = getCssRulesString(n.sheet);
-                if (cssText) {
-                    attributes_1._cssText = absoluteToStylesheet(cssText, getHref());
-                }
-            }
-            if (tagName === 'input' ||
-                tagName === 'textarea' ||
-                tagName === 'select') {
-                var value = n.value;
-                if (attributes_1.type !== 'radio' &&
-                    attributes_1.type !== 'checkbox' &&
-                    attributes_1.type !== 'submit' &&
-                    attributes_1.type !== 'button' &&
-                    value) {
-                    attributes_1.value = maskInputValue({
-                        type: attributes_1.type,
-                        tagName: tagName,
-                        value: value,
-                        maskInputOptions: maskInputOptions,
-                        maskInputFn: maskInputFn
-                    });
-                }
-                else if (n.checked) {
-                    attributes_1.checked = n.checked;
-                }
-            }
-            if (tagName === 'option') {
-                if (n.selected && !maskInputOptions['select']) {
-                    attributes_1.selected = true;
-                }
-                else {
-                    delete attributes_1.selected;
-                }
-            }
-            if (tagName === 'canvas' && recordCanvas) {
-                if (n.__context === '2d') {
-                    if (!is2DCanvasBlank(n)) {
-                        attributes_1.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-                    }
-                }
-                else if (!('__context' in n)) {
-                    var canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-                    var blankCanvas = document.createElement('canvas');
-                    blankCanvas.width = n.width;
-                    blankCanvas.height = n.height;
-                    var blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-                    if (canvasDataURL !== blankCanvasDataURL) {
-                        attributes_1.rr_dataURL = canvasDataURL;
-                    }
-                }
-            }
-            if (tagName === 'img' && inlineImages) {
-                if (!canvasService) {
-                    canvasService = doc.createElement('canvas');
-                    canvasCtx = canvasService.getContext('2d');
-                }
-                var image_1 = n;
-                var oldValue_1 = image_1.crossOrigin;
-                image_1.crossOrigin = 'anonymous';
-                var recordInlineImage = function () {
-                    try {
-                        canvasService.width = image_1.naturalWidth;
-                        canvasService.height = image_1.naturalHeight;
-                        canvasCtx.drawImage(image_1, 0, 0);
-                        attributes_1.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
-                    }
-                    catch (err) {
-                        console.warn("Cannot inline img src=" + image_1.currentSrc + "! Error: " + err);
-                    }
-                    oldValue_1
-                        ? (attributes_1.crossOrigin = oldValue_1)
-                        : image_1.removeAttribute('crossorigin');
-                };
-                if (image_1.complete && image_1.naturalWidth !== 0)
-                    recordInlineImage();
-                else
-                    image_1.onload = recordInlineImage;
-            }
-            if (tagName === 'audio' || tagName === 'video') {
-                attributes_1.rr_mediaState = n.paused
-                    ? 'paused'
-                    : 'played';
-                attributes_1.rr_mediaCurrentTime = n.currentTime;
-            }
-            if (n.scrollLeft) {
-                attributes_1.rr_scrollLeft = n.scrollLeft;
-            }
-            if (n.scrollTop) {
-                attributes_1.rr_scrollTop = n.scrollTop;
-            }
-            if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
-                var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
-                attributes_1 = {
-                    "class": attributes_1["class"],
-                    rr_width: width + "px",
-                    rr_height: height + "px"
-                };
-                needBlock = true;
-            }
-            if (tagName === 'iframe' && !keepIframeSrcFn(attributes_1.src)) {
-                if (!n.contentDocument) {
-                    attributes_1.rr_src = attributes_1.src;
-                }
-                delete attributes_1.src;
-            }
-            return {
-                type: NodeType.Element,
-                tagName: tagName,
-                attributes: attributes_1,
-                childNodes: [],
-                isSVG: isSVGElement(n) || undefined,
-                needBlock: needBlock,
+            return serializeElementNode(n, {
+                doc: doc,
+                blockClass: blockClass,
+                blockSelector: blockSelector,
+                inlineStylesheet: inlineStylesheet,
+                maskInputOptions: maskInputOptions,
+                maskInputFn: maskInputFn,
+                dataURLOptions: dataURLOptions,
+                inlineImages: inlineImages,
+                recordCanvas: recordCanvas,
+                keepIframeSrcFn: keepIframeSrcFn,
+                newlyAddedElement: newlyAddedElement,
+                enableStrictPrivacy: enableStrictPrivacy,
                 rootId: rootId
-            };
+            });
         case n.TEXT_NODE:
-            var parentTagName = n.parentNode && n.parentNode.tagName;
-            var textContent = n.textContent;
-            var isStyle = parentTagName === 'STYLE' ? true : undefined;
-            var isScript = parentTagName === 'SCRIPT' ? true : undefined;
-            var textContentHandled = false;
-            if (isStyle && textContent) {
-                try {
-                    if (n.nextSibling || n.previousSibling) {
-                    }
-                    else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
-                        textContent = stringifyStyleSheet(n.parentNode.sheet);
-                    }
-                }
-                catch (err) {
-                    console.warn("Cannot get CSS styles from text's parentNode. Error: " + err, n);
-                }
-                textContent = absoluteToStylesheet(textContent, getHref());
-                textContentHandled = true;
-            }
-            if (isScript) {
-                textContent = 'SCRIPT_PLACEHOLDER';
-                textContentHandled = true;
-            }
-            else if (parentTagName === 'NOSCRIPT') {
-                textContent = '';
-                textContentHandled = true;
-            }
-            if (!isStyle &&
-                !isScript &&
-                needMaskingText(n, maskTextClass, maskTextSelector) &&
-                textContent) {
-                textContent = maskTextFn
-                    ? maskTextFn(textContent)
-                    : textContent.replace(/[\S]/g, '*');
-            }
-            if (enableStrictPrivacy && !textContentHandled && parentTagName) {
-                var IGNORE_TAG_NAMES = new Set([
-                    'HEAD',
-                    'TITLE',
-                    'STYLE',
-                    'SCRIPT',
-                    'HTML',
-                    'BODY',
-                    'NOSCRIPT',
-                ]);
-                if (!IGNORE_TAG_NAMES.has(parentTagName) && textContent) {
-                    textContent = obfuscateText(textContent);
-                }
-            }
-            return {
-                type: NodeType.Text,
-                textContent: textContent || '',
-                isStyle: isStyle,
+            return serializeTextNode(n, {
+                maskTextClass: maskTextClass,
+                maskTextSelector: maskTextSelector,
+                maskTextFn: maskTextFn,
+                enableStrictPrivacy: enableStrictPrivacy,
                 rootId: rootId
-            };
+            });
         case n.CDATA_SECTION_NODE:
             return {
                 type: NodeType.CDATA,
@@ -669,6 +502,213 @@ function serializeNode(n, options) {
             return false;
     }
 }
+function getRootId(doc, mirror) {
+    if (!mirror.hasNode(doc))
+        return undefined;
+    var docId = mirror.getId(doc);
+    return docId === 1 ? undefined : docId;
+}
+function serializeTextNode(n, options) {
+    var _a;
+    var maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, maskTextFn = options.maskTextFn, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
+    var parentTagName = n.parentNode && n.parentNode.tagName;
+    var textContent = n.textContent;
+    var isStyle = parentTagName === 'STYLE' ? true : undefined;
+    var isScript = parentTagName === 'SCRIPT' ? true : undefined;
+    var textContentHandled = false;
+    if (isStyle && textContent) {
+        try {
+            if (n.nextSibling || n.previousSibling) {
+            }
+            else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
+                textContent = stringifyStyleSheet(n.parentNode.sheet);
+            }
+        }
+        catch (err) {
+            console.warn("Cannot get CSS styles from text's parentNode. Error: " + err, n);
+        }
+        textContent = absoluteToStylesheet(textContent, getHref());
+        textContentHandled = true;
+    }
+    if (isScript) {
+        textContent = 'SCRIPT_PLACEHOLDER';
+        textContentHandled = true;
+    }
+    else if (parentTagName === 'NOSCRIPT') {
+        textContent = '';
+        textContentHandled = true;
+    }
+    if (!isStyle &&
+        !isScript &&
+        textContent &&
+        needMaskingText(n, maskTextClass, maskTextSelector)) {
+        textContent = maskTextFn
+            ? maskTextFn(textContent)
+            : textContent.replace(/[\S]/g, '*');
+    }
+    if (enableStrictPrivacy && !textContentHandled && parentTagName) {
+        var IGNORE_TAG_NAMES = new Set([
+            'HEAD',
+            'TITLE',
+            'STYLE',
+            'SCRIPT',
+            'HTML',
+            'BODY',
+            'NOSCRIPT',
+        ]);
+        if (!IGNORE_TAG_NAMES.has(parentTagName) && textContent) {
+            textContent = obfuscateText(textContent);
+        }
+    }
+    return {
+        type: NodeType.Text,
+        textContent: textContent || '',
+        isStyle: isStyle,
+        rootId: rootId
+    };
+}
+function serializeElementNode(n, options) {
+    var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
+    var needBlock = _isBlockedElement(n, blockClass, blockSelector);
+    var tagName = getValidTagName(n);
+    var attributes = {};
+    var len = n.attributes.length;
+    for (var i = 0; i < len; i++) {
+        var attr = n.attributes[i];
+        attributes[attr.name] = transformAttribute(doc, tagName, attr.name, attr.value);
+    }
+    if (tagName === 'link' && inlineStylesheet) {
+        var stylesheet = Array.from(doc.styleSheets).find(function (s) {
+            return s.href === n.href;
+        });
+        var cssText = null;
+        if (stylesheet) {
+            cssText = getCssRulesString(stylesheet);
+        }
+        if (cssText) {
+            delete attributes.rel;
+            delete attributes.href;
+            attributes._cssText = absoluteToStylesheet(cssText, stylesheet.href);
+        }
+    }
+    if (tagName === 'style' &&
+        n.sheet &&
+        !(n.innerText || n.textContent || '').trim().length) {
+        var cssText = getCssRulesString(n.sheet);
+        if (cssText) {
+            attributes._cssText = absoluteToStylesheet(cssText, getHref());
+        }
+    }
+    if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+        var value = n.value;
+        if (attributes.type !== 'radio' &&
+            attributes.type !== 'checkbox' &&
+            attributes.type !== 'submit' &&
+            attributes.type !== 'button' &&
+            value) {
+            attributes.value = maskInputValue({
+                type: attributes.type,
+                tagName: tagName,
+                value: value,
+                maskInputOptions: maskInputOptions,
+                maskInputFn: maskInputFn
+            });
+        }
+        else if (n.checked) {
+            attributes.checked = n.checked;
+        }
+    }
+    if (tagName === 'option') {
+        if (n.selected && !maskInputOptions['select']) {
+            attributes.selected = true;
+        }
+        else {
+            delete attributes.selected;
+        }
+    }
+    if (tagName === 'canvas' && recordCanvas) {
+        if (n.__context === '2d') {
+            if (!is2DCanvasBlank(n)) {
+                attributes.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            }
+        }
+        else if (!('__context' in n)) {
+            var canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            var blankCanvas = document.createElement('canvas');
+            blankCanvas.width = n.width;
+            blankCanvas.height = n.height;
+            var blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            if (canvasDataURL !== blankCanvasDataURL) {
+                attributes.rr_dataURL = canvasDataURL;
+            }
+        }
+    }
+    if (tagName === 'img' && inlineImages) {
+        if (!canvasService) {
+            canvasService = doc.createElement('canvas');
+            canvasCtx = canvasService.getContext('2d');
+        }
+        var image_1 = n;
+        var oldValue_1 = image_1.crossOrigin;
+        image_1.crossOrigin = 'anonymous';
+        var recordInlineImage = function () {
+            try {
+                canvasService.width = image_1.naturalWidth;
+                canvasService.height = image_1.naturalHeight;
+                canvasCtx.drawImage(image_1, 0, 0);
+                attributes.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
+            }
+            catch (err) {
+                console.warn("Cannot inline img src=" + image_1.currentSrc + "! Error: " + err);
+            }
+            oldValue_1
+                ? (attributes.crossOrigin = oldValue_1)
+                : image_1.removeAttribute('crossorigin');
+        };
+        if (image_1.complete && image_1.naturalWidth !== 0)
+            recordInlineImage();
+        else
+            image_1.onload = recordInlineImage;
+    }
+    if (tagName === 'audio' || tagName === 'video') {
+        attributes.rr_mediaState = n.paused
+            ? 'paused'
+            : 'played';
+        attributes.rr_mediaCurrentTime = n.currentTime;
+    }
+    if (!newlyAddedElement) {
+        if (n.scrollLeft) {
+            attributes.rr_scrollLeft = n.scrollLeft;
+        }
+        if (n.scrollTop) {
+            attributes.rr_scrollTop = n.scrollTop;
+        }
+    }
+    if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+        var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
+        attributes = {
+            "class": attributes["class"],
+            rr_width: width + "px",
+            rr_height: height + "px"
+        };
+        needBlock = true;
+    }
+    if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
+        if (!n.contentDocument) {
+            attributes.rr_src = attributes.src;
+        }
+        delete attributes.src;
+    }
+    return {
+        type: NodeType.Element,
+        tagName: tagName,
+        attributes: attributes,
+        childNodes: [],
+        isSVG: isSVGElement(n) || undefined,
+        needBlock: needBlock,
+        rootId: rootId
+    };
+}
 function lowerIfExists(maybeAttr) {
     if (maybeAttr === undefined) {
         return '';
@@ -749,8 +789,8 @@ function slimDOMExcluded(sn, slimDOMOptions) {
     return false;
 }
 function serializeNodeWithId(n, options) {
-    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, onStylesheetLoad = options.onStylesheetLoad, _h = options.stylesheetLoadTimeout, stylesheetLoadTimeout = _h === void 0 ? 5000 : _h, _j = options.keepIframeSrcFn, keepIframeSrcFn = _j === void 0 ? function () { return false; } : _j, enableStrictPrivacy = options.enableStrictPrivacy;
-    var _k = options.preserveWhiteSpace, preserveWhiteSpace = _k === void 0 ? true : _k;
+    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, onStylesheetLoad = options.onStylesheetLoad, _h = options.stylesheetLoadTimeout, stylesheetLoadTimeout = _h === void 0 ? 5000 : _h, _j = options.keepIframeSrcFn, keepIframeSrcFn = _j === void 0 ? function () { return false; } : _j, _k = options.newlyAddedElement, newlyAddedElement = _k === void 0 ? false : _k, enableStrictPrivacy = options.enableStrictPrivacy;
+    var _l = options.preserveWhiteSpace, preserveWhiteSpace = _l === void 0 ? true : _l;
     var _serializedNode = serializeNode(n, {
         doc: doc,
         mirror: mirror,
@@ -766,6 +806,7 @@ function serializeNodeWithId(n, options) {
         inlineImages: inlineImages,
         recordCanvas: recordCanvas,
         keepIframeSrcFn: keepIframeSrcFn,
+        newlyAddedElement: newlyAddedElement,
         enableStrictPrivacy: enableStrictPrivacy
     });
     if (!_serializedNode) {
@@ -839,16 +880,16 @@ function serializeNodeWithId(n, options) {
             keepIframeSrcFn: keepIframeSrcFn,
             enableStrictPrivacy: enableStrictPrivacy
         };
-        for (var _i = 0, _l = Array.from(n.childNodes); _i < _l.length; _i++) {
-            var childN = _l[_i];
+        for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
+            var childN = _m[_i];
             var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
             if (serializedChildNode) {
                 serializedNode.childNodes.push(serializedChildNode);
             }
         }
         if (isElement(n) && n.shadowRoot) {
-            for (var _m = 0, _o = Array.from(n.shadowRoot.childNodes); _m < _o.length; _m++) {
-                var childN = _o[_m];
+            for (var _o = 0, _p = Array.from(n.shadowRoot.childNodes); _o < _p.length; _o++) {
+                var childN = _p[_o];
                 var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
                 if (serializedChildNode) {
                     serializedChildNode.isShadow = true;
@@ -885,6 +926,8 @@ function serializeNodeWithId(n, options) {
                     onSerialize: onSerialize,
                     onIframeLoad: onIframeLoad,
                     iframeLoadTimeout: iframeLoadTimeout,
+                    onStylesheetLoad: onStylesheetLoad,
+                    stylesheetLoadTimeout: stylesheetLoadTimeout,
                     keepIframeSrcFn: keepIframeSrcFn,
                     enableStrictPrivacy: enableStrictPrivacy
                 });
@@ -918,8 +961,9 @@ function serializeNodeWithId(n, options) {
                     preserveWhiteSpace: preserveWhiteSpace,
                     onSerialize: onSerialize,
                     onIframeLoad: onIframeLoad,
-                    onStylesheetLoad: onStylesheetLoad,
                     iframeLoadTimeout: iframeLoadTimeout,
+                    onStylesheetLoad: onStylesheetLoad,
+                    stylesheetLoadTimeout: stylesheetLoadTimeout,
                     keepIframeSrcFn: keepIframeSrcFn,
                     enableStrictPrivacy: enableStrictPrivacy
                 });
@@ -997,7 +1041,9 @@ function snapshot(n, options) {
         onIframeLoad: onIframeLoad,
         iframeLoadTimeout: iframeLoadTimeout,
         onStylesheetLoad: onStylesheetLoad,
-        stylesheetLoadTimeout: stylesheetLoadTimeout, keepIframeSrcFn: keepIframeSrcFn,
+        stylesheetLoadTimeout: stylesheetLoadTimeout,
+        keepIframeSrcFn: keepIframeSrcFn,
+        newlyAddedElement: false,
         enableStrictPrivacy: enableStrictPrivacy
     });
 }
@@ -1133,33 +1179,26 @@ const isCanvasNode = (node) => {
     }
     return false;
 };
-function isBlocked(node, blockClass) {
+function isBlocked(node, blockClass, checkAncestors) {
     if (!node) {
         return false;
     }
-    if (node.nodeType === node.ELEMENT_NODE) {
-        let needBlock = false;
-        if (typeof blockClass === 'string') {
-            if (node.closest !== undefined) {
-                return node.closest('.' + blockClass) !== null;
-            }
-            else {
-                needBlock = node.classList.contains(blockClass);
-            }
-        }
-        else {
-            node.classList.forEach((className) => {
-                if (blockClass.test(className)) {
-                    needBlock = true;
-                }
-            });
-        }
-        return needBlock || isBlocked(node.parentNode, blockClass);
+    const el = node.nodeType === node.ELEMENT_NODE
+        ? node
+        : node.parentElement;
+    if (!el)
+        return false;
+    if (typeof blockClass === 'string') {
+        if (el.classList.contains(blockClass))
+            return true;
+        if (checkAncestors && el.closest('.' + blockClass) !== null)
+            return true;
     }
-    if (node.nodeType === node.TEXT_NODE) {
-        return isBlocked(node.parentNode, blockClass);
+    else {
+        if (classMatchesRegex(el, blockClass, checkAncestors))
+            return true;
     }
-    return isBlocked(node.parentNode, blockClass);
+    return false;
 }
 function isSerialized(n, mirror) {
     return mirror.getId(n) !== -1;
@@ -1463,6 +1502,7 @@ class MutationBuffer {
                     onStylesheetLoad: (link, childSn) => {
                         this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
                     },
+                    newlyAddedElement: true,
                 });
                 if (sn) {
                     adds.push({
@@ -1571,7 +1611,8 @@ class MutationBuffer {
             switch (m.type) {
                 case 'characterData': {
                     const value = m.target.textContent;
-                    if (!isBlocked(m.target, this.blockClass) && value !== m.oldValue) {
+                    if (!isBlocked(m.target, this.blockClass, false) &&
+                        value !== m.oldValue) {
                         this.texts.push({
                             value: needMaskingText(m.target, this.maskTextClass, this.maskTextSelector) && value
                                 ? this.maskTextFn
@@ -1595,7 +1636,8 @@ class MutationBuffer {
                             maskInputFn: this.maskInputFn,
                         });
                     }
-                    if (isBlocked(m.target, this.blockClass) || value === m.oldValue) {
+                    if (isBlocked(m.target, this.blockClass, false) ||
+                        value === m.oldValue) {
                         return;
                     }
                     let item = this.attributes.find((a) => a.node === m.target);
@@ -1649,13 +1691,15 @@ class MutationBuffer {
                     break;
                 }
                 case 'childList': {
+                    if (isBlocked(m.target, this.blockClass, true))
+                        return;
                     m.addedNodes.forEach((n) => this.genAdds(n, m.target));
                     m.removedNodes.forEach((n) => {
                         const nodeId = this.mirror.getId(n);
                         const parentId = isShadowRoot(m.target)
                             ? this.mirror.getId(m.target.host)
                             : this.mirror.getId(m.target);
-                        if (isBlocked(m.target, this.blockClass) ||
+                        if (isBlocked(m.target, this.blockClass, false) ||
                             isIgnored(n, this.mirror) ||
                             !isSerialized(n, this.mirror)) {
                             return;
@@ -1684,16 +1728,13 @@ class MutationBuffer {
             }
         };
         this.genAdds = (n, target) => {
-            if (target && isBlocked(target, this.blockClass)) {
-                return;
-            }
-            if (this.mirror.getMeta(n)) {
+            if (this.mirror.hasNode(n)) {
                 if (isIgnored(n, this.mirror)) {
                     return;
                 }
                 this.movedSet.add(n);
                 let targetId = null;
-                if (target && this.mirror.getMeta(target)) {
+                if (target && this.mirror.hasNode(target)) {
                     targetId = this.mirror.getId(target);
                 }
                 if (targetId && targetId !== -1) {
@@ -1704,7 +1745,7 @@ class MutationBuffer {
                 this.addedSet.add(n);
                 this.droppedSet.delete(n);
             }
-            if (!isBlocked(n, this.blockClass))
+            if (!isBlocked(n, this.blockClass, false))
                 n.childNodes.forEach((childN) => this.genAdds(childN));
         };
     }
@@ -1764,6 +1805,11 @@ function deepDelete(addsSet, n) {
     n.childNodes.forEach((childN) => deepDelete(addsSet, childN));
 }
 function isParentRemoved(removes, n, mirror) {
+    if (removes.length === 0)
+        return false;
+    return _isParentRemoved(removes, n, mirror);
+}
+function _isParentRemoved(removes, n, mirror) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -1772,9 +1818,14 @@ function isParentRemoved(removes, n, mirror) {
     if (removes.some((r) => r.id === parentId)) {
         return true;
     }
-    return isParentRemoved(removes, parentNode, mirror);
+    return _isParentRemoved(removes, parentNode, mirror);
 }
 function isAncestorInSet(set, n) {
+    if (set.size === 0)
+        return false;
+    return _isAncestorInSet(set, n);
+}
+function _isAncestorInSet(set, n) {
     const { parentNode } = n;
     if (!parentNode) {
         return false;
@@ -1782,7 +1833,7 @@ function isAncestorInSet(set, n) {
     if (set.has(parentNode)) {
         return true;
     }
-    return isAncestorInSet(set, parentNode);
+    return _isAncestorInSet(set, parentNode);
 }
 
 const mutationBuffers = [];
@@ -1892,7 +1943,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
     const getHandler = (eventKey) => {
         return (event) => {
             const target = getEventTarget(event);
-            if (isBlocked(target, blockClass) ||
+            if (isBlocked(target, blockClass, true) ||
                 isCanvasNode(target)) {
                 return;
             }
@@ -1926,7 +1977,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
 function initScrollObserver({ scrollCb, doc, mirror, blockClass, sampling, }) {
     const updatePosition = throttle((evt) => {
         const target = getEventTarget(evt);
-        if (!target || isBlocked(target, blockClass)) {
+        if (!target || isBlocked(target, blockClass, true)) {
             return;
         }
         const id = mirror.getId(target);
@@ -1982,7 +2033,7 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, ignoreClass, mask
         if (!target ||
             !target.tagName ||
             INPUT_TAGS.indexOf(target.tagName) < 0 ||
-            isBlocked(target, blockClass)) {
+            isBlocked(target, blockClass, true)) {
             return;
         }
         const type = target.type;
@@ -2117,8 +2168,8 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
     const unmodifiedFunctions = {};
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
         unmodifiedFunctions[typeKey] = {
-            insertRule: (type).prototype.insertRule,
-            deleteRule: (type).prototype.deleteRule,
+            insertRule: type.prototype.insertRule,
+            deleteRule: type.prototype.deleteRule,
         };
         type.prototype.insertRule = function (rule, index) {
             const id = mirror.getId(this.parentStyleSheet.ownerNode);
@@ -2199,7 +2250,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
 function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror, sampling, }) {
     const handler = (type) => throttle((event) => {
         const target = getEventTarget(event);
-        if (!target || isBlocked(target, blockClass)) {
+        if (!target || isBlocked(target, blockClass, true)) {
             return;
         }
         const { currentTime, volume, muted } = target;
@@ -2633,7 +2684,7 @@ function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
             }
             const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
                 return function (...args) {
-                    if (!isBlocked(this.canvas, blockClass)) {
+                    if (!isBlocked(this.canvas, blockClass, true)) {
                         setTimeout(() => {
                             const recordArgs = serializeArgs([...args], win, this);
                             cb(this.canvas, {
@@ -2672,9 +2723,9 @@ function initCanvasContextObserver(win, blockClass) {
     try {
         const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
             return function (contextType, ...args) {
-                if (!isBlocked(this, blockClass)) {
+                if (!isBlocked(this, blockClass, true)) {
                     if (!('__context' in this))
-                        (this).__context = contextType;
+                        this.__context = contextType;
                 }
                 return original.apply(this, [contextType, ...args]);
             };
@@ -2701,8 +2752,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, mirror, win) {
                 return function (...args) {
                     const result = original.apply(this, args);
                     saveWebGLVar(result, win, prototype);
-                    if (!isBlocked(this.canvas, blockClass)) {
-                        const id = mirror.getId(this.canvas);
+                    if (!isBlocked(this.canvas, blockClass, true)) {
                         const recordArgs = serializeArgs([...args], win, prototype);
                         const mutation = {
                             type,
@@ -3181,6 +3231,9 @@ function record(options = {}) {
                 if (isSerializedIframe(n, mirror)) {
                     iframeManager.addIframe(n);
                 }
+                if (isSerializedStylesheet(n, mirror)) {
+                    stylesheetManager.addStylesheet(n);
+                }
                 if (hasShadowRoot(n)) {
                     shadowDomManager.addShadowRoot(n.shadowRoot, document);
                 }
@@ -3190,7 +3243,7 @@ function record(options = {}) {
                 shadowDomManager.observeAttachShadow(iframe);
             },
             onStylesheetLoad: (linkEl, childSn) => {
-                this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
+                stylesheetManager.attachStylesheet(linkEl, childSn, mirror);
             },
             keepIframeSrcFn,
         });