impl shadow DOM manager

part of #38
1. observe DOM mutations in shadow DOM
2. rebuild DOM mutations in shadow DOM

test/integration.test.ts

@@ -419,4 +419,41 @@ describe('record integration tests', function (this: ISuite) {
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots, __filename, 'iframe');
   });
+
+  it('should record shadow DOM', async () => {
+    const page: puppeteer.Page = await this.browser.newPage();
+    await page.goto('about:blank');
+    await page.setContent(getHtml.call(this, 'shadow-dom.html'));
+
+    await page.evaluate(() => {
+      const sleep = (ms: number) =>
+        new Promise((resolve) => setTimeout(resolve, ms));
+
+      const el = document.querySelector('.my-element') as HTMLDivElement;
+      const shadowRoot = el.shadowRoot as ShadowRoot;
+      shadowRoot.appendChild(document.createElement('p'));
+      sleep(1)
+        .then(() => {
+          shadowRoot.lastChild!.appendChild(document.createElement('p'));
+          return sleep(1);
+        })
+        .then(() => {
+          const firstP = shadowRoot.querySelector('p') as HTMLParagraphElement;
+          shadowRoot.removeChild(firstP);
+          return sleep(1);
+        })
+        .then(() => {
+          (shadowRoot.lastChild!.childNodes[0] as HTMLElement).innerText = 'hi';
+          return sleep(1);
+        })
+        .then(() => {
+          (shadowRoot.lastChild!.childNodes[0] as HTMLElement).innerText =
+            '123';
+        });
+    });
+    await page.waitFor(50);
+
+    const snapshots = await page.evaluate('window.snapshots');
+    assertSnapshot(snapshots, __filename, 'shadow-dom');
+  });
 });