impl the extra child data attribute to align id map

src/rebuild.ts

@@ -24,6 +24,7 @@ function buildNode(n: serializedNodeWithId): Node | null {
     case NodeType.Element:
       const tagName = getTagName(n);
       const node = document.createElement(tagName);
+      const extraChildIndexes: number[] = [];
       for (const name in n.attributes) {
         if (n.attributes.hasOwnProperty(name)) {
           let value = n.attributes[name];
@@ -32,6 +33,8 @@ function buildNode(n: serializedNodeWithId): Node | null {
           const isRemoteCss = tagName === 'style' && name === '_cssText';
           if (isTextarea || isRemoteCss) {
             const child = document.createTextNode(value);
+            // identify the extra child DOM we added when rebuild
+            extraChildIndexes.push(node.childNodes.length);
             node.appendChild(child);
             continue;
           }
@@ -42,6 +45,12 @@ function buildNode(n: serializedNodeWithId): Node | null {
           }
         }
       }
+      if (extraChildIndexes.length) {
+        node.setAttribute(
+          'data-extra-child-index',
+          JSON.stringify(extraChildIndexes),
+        );
+      }
       return node;
     case NodeType.Text:
       return document.createTextNode(n.textContent);

src/snapshot.ts

@@ -52,7 +52,7 @@ function absoluteToDoc(doc: Document, attributeValue: string): string {
   if (!RELATIVE_PATH.test(attributeValue)) {
     return attributeValue;
   }
-  const a: HTMLAnchorElement = document.createElement('a');
+  const a: HTMLAnchorElement = doc.createElement('a');
   a.href = attributeValue;
   return a.href;
 }
@@ -130,7 +130,7 @@ function serializeNode(n: Node, doc: Document): serializedNode | false {
         n.parentNode && (n.parentNode as HTMLElement).tagName;
       let textContent = (n as Text).textContent;
       if (parentTagName === 'SCRIPT') {
-        textContent = '';
+        textContent = 'SCRIPT_PLACEHOLDER';
       }
       return {
         type: NodeType.Text,