diff --git a/lerna.json b/lerna.json
index 0f0274ed2..89fb8b634 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "packages": [
     "packages/*"
   ],
diff --git a/package.json b/package.json
index 0e6ded240..89094e4b3 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "postinstall": "lerna run --stream postinstall",
     "test": "lerna run --stream --concurrency=1 test",
     "test:coverage": "lerna run --stream --concurrency=1 --no-bail test:coverage",
-    "test:types": "lerna run --parallel test:types"
+    "test:types": "lerna run --parallel test:types",
+    "global:link": "lerna exec -- yarn link",
+    "global:unlink": "lerna exec -- yarn unlink"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
diff --git a/packages/cli-app/package.json b/packages/cli-app/package.json
index 6a32b7543..0e55fa6f4 100644
--- a/packages/cli-app/package.json
+++ b/packages/cli-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-app",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
-    "@percy/cli-exec": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0",
+    "@percy/cli-exec": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-build/package.json b/packages/cli-build/package.json
index aef697eb2..c4cfc0e38 100644
--- a/packages/cli-build/package.json
+++ b/packages/cli-build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-build",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +32,6 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-command/package.json b/packages/cli-command/package.json
index 0681be792..94c925939 100644
--- a/packages/cli-command/package.json
+++ b/packages/cli-command/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-command",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -35,8 +35,8 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/config": "1.18.0",
-    "@percy/core": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/config": "1.19.2-alpha.0",
+    "@percy/core": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-config/package.json b/packages/cli-config/package.json
index 9c28e0b39..881b86cc9 100644
--- a/packages/cli-config/package.json
+++ b/packages/cli-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-config",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +32,6 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0"
+    "@percy/cli-command": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/cli-exec/package.json b/packages/cli-exec/package.json
index e75ae73ca..63118c5e3 100644
--- a/packages/cli-exec/package.json
+++ b/packages/cli-exec/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-exec",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "cross-spawn": "^7.0.3",
     "which": "^2.0.2"
   }
diff --git a/packages/cli-snapshot/package.json b/packages/cli-snapshot/package.json
index c65e9a986..fef1bfa1d 100644
--- a/packages/cli-snapshot/package.json
+++ b/packages/cli-snapshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-snapshot",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "yaml": "^2.0.0"
   }
 }
diff --git a/packages/cli-upload/package.json b/packages/cli-upload/package.json
index 3ecc0818e..842e1f916 100644
--- a/packages/cli-upload/package.json
+++ b/packages/cli-upload/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli-upload",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@percy/cli-command": "1.18.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
     "fast-glob": "^3.2.11",
     "image-size": "^1.0.0"
   }
diff --git a/packages/cli/README.md b/packages/cli/README.md
index 953693e7c..6c60dbce5 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -60,6 +60,13 @@ use the following scripts for various development tasks:
 - `yarn readme` - generate cli commands readme usage
 - `yarn test` - run all tests, one package after another
 - `yarn test:coverage` - run all tests with coverage, one package after another
+- `yarn global:link` - links all packages being developed as global.
+    - requires `yarn build` to be run before
+    - we can then consume this package using
+        `[npm|yarn] link @percy/[core|cli..]`
+    - **Note**: linking is only required once, subsequent changes for development requires running build command. 
+    
+- `yarn global:unlink` - unlinks all packages globally
 
 Individual package scripts can be invoked using yarn's
 [workspace](https://classic.yarnpkg.com/en/docs/cli/workspace/) command. For example:
@@ -67,3 +74,31 @@ Individual package scripts can be invoked using yarn's
 ```sh-session
 $ yarn workspace @percy/core test
 ```
+
+
+## Publish
+
+Most of the repos have similar setup as CLI, steps as follows
+
+1.  bump version 
+
+```
+yarn bump-version
+```
+
+2.  commit with following commit message => `:bookmark: vTAG` 
+
+3.  Draft a new release and publish it
+
+This will run release.yml workflow on github actions, which publishes the NPM packages
+
+### Publish with specific tag
+
+Currently release workflow only support publishing with latest tag. 
+To publish with alpha/any other TAG.
+
+1. follow till step 2 above and then run
+
+```
+yarn lerna publish from-package --dist-tag TAG
+```
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 6f861792e..7a2b128dc 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/cli",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,14 +30,14 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/cli-app": "1.18.0",
-    "@percy/cli-build": "1.18.0",
-    "@percy/cli-command": "1.18.0",
-    "@percy/cli-config": "1.18.0",
-    "@percy/cli-exec": "1.18.0",
-    "@percy/cli-snapshot": "1.18.0",
-    "@percy/cli-upload": "1.18.0",
-    "@percy/client": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/cli-app": "1.19.2-alpha.0",
+    "@percy/cli-build": "1.19.2-alpha.0",
+    "@percy/cli-command": "1.19.2-alpha.0",
+    "@percy/cli-config": "1.19.2-alpha.0",
+    "@percy/cli-exec": "1.19.2-alpha.0",
+    "@percy/cli-snapshot": "1.19.2-alpha.0",
+    "@percy/cli-upload": "1.19.2-alpha.0",
+    "@percy/client": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/client/package.json b/packages/client/package.json
index 4d8c7a9cb..5578a3901 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/client",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "test:coverage": "yarn test --coverage"
   },
   "dependencies": {
-    "@percy/env": "1.18.0",
-    "@percy/logger": "1.18.0"
+    "@percy/env": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0"
   }
 }
diff --git a/packages/config/package.json b/packages/config/package.json
index 904d39d9e..c8f495870 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/config",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/logger": "1.18.0",
+    "@percy/logger": "1.19.2-alpha.0",
     "ajv": "^8.6.2",
     "cosmiconfig": "^7.0.0",
     "yaml": "^2.0.0"
diff --git a/packages/config/src/utils/normalize.js b/packages/config/src/utils/normalize.js
index 56c197f5e..1b07c4c42 100644
--- a/packages/config/src/utils/normalize.js
+++ b/packages/config/src/utils/normalize.js
@@ -4,7 +4,8 @@ import { getSchema } from '../validate.js';
 // Edge case camelizations
 const CAMELCASE_MAP = new Map([
   ['css', 'CSS'],
-  ['javascript', 'JavaScript']
+  ['javascript', 'JavaScript'],
+  ['dom', 'DOM']
 ]);
 
 // Regular expression that matches words from boundaries or consecutive casing
diff --git a/packages/config/test/index.test.js b/packages/config/test/index.test.js
index 093281974..443b7f6e1 100644
--- a/packages/config/test/index.test.js
+++ b/packages/config/test/index.test.js
@@ -1100,14 +1100,16 @@ describe('PercyConfig', () => {
         'foo_bar-baz': 'qux',
         'Bar BAZ qux': 'xyzzy',
         'percy-css': '',
-        'enable-javascript': false
+        'enable-javascript': false,
+        'disable-shadow-dom': true
       })).toEqual({
         fooBar: 'baz',
         foo: { barBaz: 'qux' },
         fooBarBaz: 'qux',
         barBazQux: 'xyzzy',
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       });
     });
 
@@ -1117,13 +1119,15 @@ describe('PercyConfig', () => {
         foo: { bar_baz: 'qux' },
         fooBar_baz: ['qux'],
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       }, { kebab: true })).toEqual({
         'foo-bar': 'baz',
         foo: { 'bar-baz': 'qux' },
         'foo-bar-baz': ['qux'],
         'percy-css': '',
-        'enable-javascript': false
+        'enable-javascript': false,
+        'disable-shadow-dom': true
       });
     });
 
@@ -1133,13 +1137,15 @@ describe('PercyConfig', () => {
         foo: { bar_baz: 'qux' },
         fooBar_baz: ['qux'],
         percyCSS: '',
-        enableJavaScript: false
+        enableJavaScript: false,
+        disableShadowDOM: true
       }, { snake: true })).toEqual({
         foo_bar: 'baz',
         foo: { bar_baz: 'qux' },
         foo_bar_baz: ['qux'],
         percy_css: '',
-        enable_javascript: false
+        enable_javascript: false,
+        disable_shadow_dom: true
       });
     });
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 487b46737..e906b2a51 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,10 +39,10 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.18.0",
-    "@percy/config": "1.18.0",
-    "@percy/dom": "1.18.0",
-    "@percy/logger": "1.18.0",
+    "@percy/client": "1.19.2-alpha.0",
+    "@percy/config": "1.19.2-alpha.0",
+    "@percy/dom": "1.19.2-alpha.0",
+    "@percy/logger": "1.19.2-alpha.0",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
diff --git a/packages/core/src/config.js b/packages/core/src/config.js
index 655e5779c..ea6c782d3 100644
--- a/packages/core/src/config.js
+++ b/packages/core/src/config.js
@@ -35,6 +35,10 @@ export const configSchema = {
       enableJavaScript: {
         type: 'boolean'
       },
+      disableShadowDOM: {
+        type: 'boolean',
+        default: false
+      },
       scope: {
         type: 'string'
       }
@@ -149,6 +153,7 @@ export const snapshotSchema = {
         minHeight: { $ref: '/config/snapshot#/properties/minHeight' },
         percyCSS: { $ref: '/config/snapshot#/properties/percyCSS' },
         enableJavaScript: { $ref: '/config/snapshot#/properties/enableJavaScript' },
+        disableShadowDOM: { $ref: '/config/snapshot#/properties/disableShadowDOM' },
         discovery: {
           type: 'object',
           additionalProperties: false,
diff --git a/packages/core/src/discovery.js b/packages/core/src/discovery.js
index 6eced049b..67e5a7d94 100644
--- a/packages/core/src/discovery.js
+++ b/packages/core/src/discovery.js
@@ -34,6 +34,7 @@ function debugSnapshotOptions(snapshot) {
   debugProp(snapshot, 'widths', v => `${v}px`);
   debugProp(snapshot, 'minHeight', v => `${v}px`);
   debugProp(snapshot, 'enableJavaScript');
+  debugProp(snapshot, 'disableShadowDOM');
   debugProp(snapshot, 'deviceScaleFactor');
   debugProp(snapshot, 'waitForTimeout');
   debugProp(snapshot, 'waitForSelector');
diff --git a/packages/core/src/page.js b/packages/core/src/page.js
index 1a47d200d..462a22fac 100644
--- a/packages/core/src/page.js
+++ b/packages/core/src/page.js
@@ -140,7 +140,7 @@ export class Page {
     execute,
     ...snapshot
   }) {
-    let { name, width, enableJavaScript } = snapshot;
+    let { name, width, enableJavaScript, disableShadowDOM } = snapshot;
     this.log.debug(`Taking snapshot: ${name}${width ? ` @${width}px` : ''}`, this.meta);
 
     // wait for any specified timeout
@@ -181,7 +181,7 @@ export class Page {
       /* eslint-disable-next-line no-undef */
       domSnapshot: PercyDOM.serialize(options),
       url: document.URL
-    }), { enableJavaScript });
+    }), { enableJavaScript, disableShadowDOM });
 
     return { ...snapshot, ...capture };
   }
diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
index c85ac55d8..00b01261e 100644
--- a/packages/core/test/discovery.test.js
+++ b/packages/core/test/discovery.test.js
@@ -305,7 +305,8 @@ describe('Discovery', () => {
     await percy.snapshot({
       name: 'test event snapshot',
       url: 'http://localhost:8000/events',
-      enableJavaScript: true
+      enableJavaScript: true,
+      disableShadowDOM: true
     });
 
     await percy.idle();
diff --git a/packages/core/test/percy.test.js b/packages/core/test/percy.test.js
index c43200b13..4b349846c 100644
--- a/packages/core/test/percy.test.js
+++ b/packages/core/test/percy.test.js
@@ -56,7 +56,8 @@ describe('Percy', () => {
     expect(percy.config.snapshot).toEqual({
       widths: [375, 1280],
       minHeight: 1024,
-      percyCSS: ''
+      percyCSS: '',
+      disableShadowDOM: false
     });
   });
 
@@ -76,7 +77,8 @@ describe('Percy', () => {
       execute() {
         let p = document.querySelector('p');
         p.textContent = p.textContent.replace('Hello', 'Hello there,');
-      }
+      },
+      disableShadowDOM: true
     });
 
     expect(snapshot.url).toEqual('http://localhost:8000/');
diff --git a/packages/core/types/index.d.ts b/packages/core/types/index.d.ts
index 97767687c..19439d61b 100644
--- a/packages/core/types/index.d.ts
+++ b/packages/core/types/index.d.ts
@@ -38,6 +38,7 @@ interface CommonSnapshotOptions {
   minHeight?: number;
   percyCSS?: string;
   enableJavaScript?: boolean;
+  disableShadowDOM?: boolean;
   devicePixelRatio?: number;
   scope?: string;
 }
diff --git a/packages/dom/README.md b/packages/dom/README.md
index 8f49b72aa..fcbd2788f 100644
--- a/packages/dom/README.md
+++ b/packages/dom/README.md
@@ -37,6 +37,7 @@ const domSnapshot = await page.evaluate(() => PercyDOM.serialize(options))
 
 - `enableJavaScript` — When true, does not serialize some DOM elements
 - `domTransformation` — Function to transform the DOM after serialization
+- `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
 
 ## Serialized Content
 
@@ -71,7 +72,44 @@ Videos without a `poster` attribute will have the current frame of the video
 serialized into an image and set as the `poster` attribute automatically. This is
 to ensure videos have a stable image to display when screenshots are captured.
 
+### Shadow DOM
+
+Shadow dom  `#shadow-root (open)` is serialized into declarative shadow DOM (`<template shadowroot="open">`) form
+Shadow host element is annotated with special identifier attribute named `data-percy-shadow-host`. This identifier 
+attribute may be used when passing `domTransformation`.
+
 ### Other elements
 
 _All other elements are not serialized._ The resulting cloned document is passed to any provided
 `domTransformation` option before the serialize function returns a DOM string.
+
+
+
+## Examples 
+
+1. perform DOM transformations on serialized DOM 
+
+this example contains scenario of nested shadow DOMs
+
+```js
+import serializeDOM from '@percy/dom';
+
+const domSnapshot = serializeDOM({
+    domTransformation: (documentElement) => {
+      function insertHelloHeader(root) {
+        h1 = document.createElement('h1');
+        h1.innerText = 'Inserted using dom transformations';
+        root.append(h1);
+
+        root.querySelectorAll('[data-percy-shadow-host]')
+          .forEach(
+            shadowHost => {
+              if (shadowHost?.shadowRoot)
+                insertHelloHeader(shadowHost.shadowRoot)
+            });
+
+      }
+      insertHelloHeader(documentElement);
+    }
+  });
+```
diff --git a/packages/dom/package.json b/packages/dom/package.json
index b6af3d2eb..5b07cefb5 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/dom/src/clone-dom.js b/packages/dom/src/clone-dom.js
new file mode 100644
index 000000000..735ff065a
--- /dev/null
+++ b/packages/dom/src/clone-dom.js
@@ -0,0 +1,75 @@
+/**
+ * Custom deep clone function that replaces Percy's current clone behavior.
+ * This enables us to capture shadow DOM in snapshots. It takes advantage of `attachShadow`'s mode option set to open
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#parameters
+ */
+import markElement from './prepare-dom';
+
+// returns document fragment
+const deepClone = (host, disableShadowDOM) => {
+  // clones shadow DOM and light DOM for a given node
+  let cloneNode = (node, parent) => {
+    let walkTree = (nextn, nextp) => {
+      while (nextn) {
+        cloneNode(nextn, nextp);
+        nextn = nextn.nextSibling;
+      }
+    };
+
+    // mark the node before cloning
+    markElement(node, disableShadowDOM);
+
+    let clone = node.cloneNode();
+
+    parent.appendChild(clone);
+
+    // clone shadow DOM
+    if (node.shadowRoot && !disableShadowDOM) {
+      // create shadowRoot
+      if (clone.shadowRoot) {
+        // it may be set up in a custom element's constructor
+        clone.shadowRoot.innerHTML = '';
+      } else {
+        clone.attachShadow({
+          mode: 'open'
+        });
+      }
+      // clone dom elements
+      walkTree(node.shadowRoot.firstChild, clone.shadowRoot);
+    }
+
+    // clone light DOM
+    walkTree(node.firstChild, clone);
+  };
+
+  let fragment = document.createDocumentFragment();
+  cloneNode(host, fragment);
+  return fragment;
+};
+
+/**
+ * Deep clone a document while also preserving shadow roots and converting adoptedStylesheets to <style> tags.
+ */
+const cloneNodeAndShadow = (ctx) => {
+  let cloneDocumentElement = deepClone(ctx.dom.documentElement, ctx.disableShadowDOM);
+  // TODO: we're not properly appending documentElement (html node) in the clone document, this can cause side effects in original document.
+  // convert document fragment to document object
+  let cloneDocument = ctx.dom.cloneNode();
+  // dissolve document fragment in clone document
+  cloneDocument.appendChild(cloneDocumentElement);
+  return cloneDocument;
+};
+
+/**
+ * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
+ */
+const getOuterHTML = (docElement) => {
+  // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+  if (!docElement.getInnerHTML) { return docElement.outerHTML; }
+  // chromium gives us declarative shadow DOM serialization API
+  let innerHTML = docElement.getInnerHTML({ includeShadowRoots: true });
+  docElement.textContent = '';
+  return docElement.outerHTML.replace('</html>', `${innerHTML}</html>`);
+};
+
+export { cloneNodeAndShadow, getOuterHTML };
diff --git a/packages/dom/src/inject-polyfill.js b/packages/dom/src/inject-polyfill.js
new file mode 100644
index 000000000..603abb4f9
--- /dev/null
+++ b/packages/dom/src/inject-polyfill.js
@@ -0,0 +1,33 @@
+
+// we inject declarative shadow dom polyfill to allow shadow dom to load in non chromium infrastructure browsers
+// Since only chromium currently supports declarative shadow DOM - https://caniuse.com/declarative-shadow-dom
+export function injectDeclarativeShadowDOMPolyfill(ctx) {
+  let clone = ctx.clone;
+  let scriptEl = clone.createElement('script');
+  scriptEl.setAttribute('id', '__percy_shadowdom_helper');
+  scriptEl.setAttribute('data-percy-injected', true);
+
+  scriptEl.innerHTML = `
+    function reversePolyFill(root=document){
+      root.querySelectorAll('template[shadowroot]').forEach(template => {
+        const mode = template.getAttribute('shadowroot');
+        const shadowRoot = template.parentNode.attachShadow({ mode });
+        shadowRoot.appendChild(template.content);
+        template.remove();
+      });
+
+      root.querySelectorAll('[data-percy-shadow-host]').forEach(shadowHost => reversePolyFill(shadowHost.shadowRoot));
+    }
+
+    if (["interactive", "complete"].includes(document.readyState)) {
+      reversePolyFill();
+    } else {
+      document.addEventListener("DOMContentLoaded", () => reversePolyFill());
+    }
+  `.replace(/(\n|\s{2}|\t)/g, '');
+
+  // run polyfill as first thing post dom content is loaded
+  clone.head.prepend(scriptEl);
+}
+
+export default injectDeclarativeShadowDOMPolyfill;
diff --git a/packages/dom/src/prepare-dom.js b/packages/dom/src/prepare-dom.js
index 181972b25..25a093219 100644
--- a/packages/dom/src/prepare-dom.js
+++ b/packages/dom/src/prepare-dom.js
@@ -1,17 +1,24 @@
 // Returns a mostly random uid.
-function uid() {
+export function uid() {
   return `_${Math.random().toString(36).substr(2, 9)}`;
 }
 
-// Marks elements that are to be serialized later with a data attribute.
-export function prepareDOM(dom) {
-  for (let elem of dom.querySelectorAll('input, textarea, select, iframe, canvas, video, style')) {
-    if (!elem.getAttribute('data-percy-element-id')) {
-      elem.setAttribute('data-percy-element-id', uid());
+export function markElement(domElement, disableShadowDOM) {
+  // Mark elements that are to be serialized later with a data attribute.
+  if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes(domElement.tagName?.toLowerCase())) {
+    if (!domElement.getAttribute('data-percy-element-id')) {
+      domElement.setAttribute('data-percy-element-id', uid());
     }
   }
 
-  return dom;
+  // add special marker for shadow host
+  if (!disableShadowDOM && domElement.shadowRoot) {
+    domElement.setAttribute('data-percy-shadow-host', '');
+
+    if (!domElement.getAttribute('data-percy-element-id')) {
+      domElement.setAttribute('data-percy-element-id', uid());
+    }
+  }
 }
 
-export default prepareDOM;
+export default markElement;
diff --git a/packages/dom/src/serialize-canvas.js b/packages/dom/src/serialize-canvas.js
index dc76a8ef6..8f683133a 100644
--- a/packages/dom/src/serialize-canvas.js
+++ b/packages/dom/src/serialize-canvas.js
@@ -17,7 +17,7 @@ export function serializeCanvas({ dom, clone, resources }) {
     resources.add(resource);
 
     // create an image element in the cloned dom
-    let img = clone.createElement('img');
+    let img = document.createElement('img');
     // use a data attribute to avoid making a real request
     img.setAttribute('data-percy-serialized-attribute-src', resource.url);
 
@@ -34,7 +34,12 @@ export function serializeCanvas({ dom, clone, resources }) {
 
     // insert the image into the cloned DOM and remove the cloned canvas element
     let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
-    cloneEl.parentElement.insertBefore(img, cloneEl);
+    // `parentElement` for elements directly under shadow root is `null` -> Incase of Nested Shadow DOM.
+    if (cloneEl.parentElement) {
+      cloneEl.parentElement.insertBefore(img, cloneEl);
+    } else {
+      clone.insertBefore(img, cloneEl);
+    }
     cloneEl.remove();
   }
 }
diff --git a/packages/dom/src/serialize-cssom.js b/packages/dom/src/serialize-cssom.js
index 405d11e9c..58c3d10d8 100644
--- a/packages/dom/src/serialize-cssom.js
+++ b/packages/dom/src/serialize-cssom.js
@@ -1,3 +1,6 @@
+import { resourceFromText } from './utils';
+import { uid } from './prepare-dom';
+
 // Returns true if a stylesheet is a CSSOM-based stylesheet.
 function isCSSOM(styleSheet) {
   // no href, has a rulesheet, and has an owner node
@@ -15,14 +18,19 @@ function styleSheetsMatch(sheetA, sheetB) {
   return true;
 }
 
-// Outputs in-memory CSSOM into their respective DOM nodes.
-export function serializeCSSOM({ dom, clone }) {
+export function serializeCSSOM({ dom, clone, warnings, resources, cache }) {
+  // in-memory CSSOM into their respective DOM nodes.
   for (let styleSheet of dom.styleSheets) {
     if (isCSSOM(styleSheet)) {
       let styleId = styleSheet.ownerNode.getAttribute('data-percy-element-id');
+      if (!styleId) {
+        let attributes = Array.from(styleSheet.ownerNode.attributes).map(attr => `${attr.name}: ${attr.value}`);
+        warnings.add(`stylesheet with attributes - [ ${attributes} ] - was not serialized`);
+        continue;
+      }
       let cloneOwnerNode = clone.querySelector(`[data-percy-element-id="${styleId}"]`);
       if (styleSheetsMatch(styleSheet, cloneOwnerNode.sheet)) continue;
-      let style = clone.createElement('style');
+      let style = document.createElement('style');
 
       style.type = 'text/css';
       style.setAttribute('data-percy-element-id', styleId);
@@ -34,6 +42,30 @@ export function serializeCSSOM({ dom, clone }) {
       cloneOwnerNode.remove();
     }
   }
+
+  // clone Adopted Stylesheets
+  // Regarding ordering of the adopted stylesheets - https://github.com/WICG/construct-stylesheets/issues/93
+  for (let sheet of dom.adoptedStyleSheets) {
+    const styleLink = document.createElement('link');
+    styleLink.setAttribute('rel', 'stylesheet');
+
+    if (!cache.has(sheet)) {
+      const styles = Array.from(sheet.cssRules)
+        .map(cssRule => cssRule.cssText).join('\n');
+      let resource = resourceFromText(uid(), 'text/css', styles);
+      resources.add(resource);
+      cache.set(sheet, resource.url);
+    }
+    styleLink.setAttribute('data-percy-serialized-attribute-href', cache.get(sheet));
+
+    /* istanbul ignore next: tested, but coverage is stripped */
+    if (clone.constructor.name === 'HTMLDocument') {
+      // handle document and iframe
+      clone.body.prepend(styleLink);
+    } else if (clone.constructor.name === 'ShadowRoot') {
+      clone.prepend(styleLink);
+    }
+  }
 }
 
 export default serializeCSSOM;
diff --git a/packages/dom/src/serialize-dom.js b/packages/dom/src/serialize-dom.js
index cc80ff9db..37802a133 100644
--- a/packages/dom/src/serialize-dom.js
+++ b/packages/dom/src/serialize-dom.js
@@ -1,9 +1,10 @@
-import prepareDOM from './prepare-dom';
 import serializeInputs from './serialize-inputs';
 import serializeFrames from './serialize-frames';
 import serializeCSSOM from './serialize-cssom';
 import serializeCanvas from './serialize-canvas';
 import serializeVideos from './serialize-video';
+import { cloneNodeAndShadow, getOuterHTML } from './clone-dom';
+import injectDeclarativeShadowDOMPolyfill from './inject-polyfill';
 
 // Returns a copy or new doctype for a document.
 function doctype(dom) {
@@ -23,13 +24,38 @@ function doctype(dom) {
 
 // Serializes and returns the cloned DOM as an HTML string
 function serializeHTML(ctx) {
-  let html = ctx.clone.documentElement.outerHTML;
+  let html = getOuterHTML(ctx.clone.documentElement);
   // replace serialized data attributes with real attributes
   html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
   // include the doctype with the html string
   return doctype(ctx.dom) + html;
 }
 
+function serializeElements(ctx) {
+  serializeInputs(ctx);
+  serializeFrames(ctx);
+  serializeVideos(ctx);
+
+  if (!ctx.enableJavaScript) {
+    serializeCSSOM(ctx);
+    serializeCanvas(ctx);
+  }
+
+  for (const shadowHost of ctx.dom.querySelectorAll('[data-percy-shadow-host]')) {
+    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
+    let cloneShadowHost = ctx.clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
+    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
+      serializeElements({
+        ...ctx,
+        dom: shadowHost.shadowRoot,
+        clone: cloneShadowHost.shadowRoot
+      });
+    } else {
+      ctx.warnings.add('data-percy-shadow-host does not have shadowRoot');
+    }
+  }
+}
+
 // Serializes a document and returns the resulting DOM string.
 export function serializeDOM(options) {
   let {
@@ -37,27 +63,23 @@ export function serializeDOM(options) {
     // allow snake_case or camelCase
     enableJavaScript = options?.enable_javascript,
     domTransformation = options?.dom_transformation,
-    stringifyResponse = options?.stringify_response
+    stringifyResponse = options?.stringify_response,
+    disableShadowDOM = options?.disable_shadow_dom
   } = options || {};
 
   // keep certain records throughout serialization
   let ctx = {
     resources: new Set(),
     warnings: new Set(),
-    enableJavaScript
+    cache: new Map(),
+    enableJavaScript,
+    disableShadowDOM
   };
 
-  ctx.dom = prepareDOM(dom);
-  ctx.clone = ctx.dom.cloneNode(true);
-
-  serializeInputs(ctx);
-  serializeFrames(ctx);
-  serializeVideos(ctx);
+  ctx.dom = dom;
+  ctx.clone = cloneNodeAndShadow(ctx);
 
-  if (!enableJavaScript) {
-    serializeCSSOM(ctx);
-    serializeCanvas(ctx);
-  }
+  serializeElements(ctx);
 
   if (domTransformation) {
     try {
@@ -67,6 +89,8 @@ export function serializeDOM(options) {
     }
   }
 
+  if (!disableShadowDOM) { injectDeclarativeShadowDOMPolyfill(ctx); }
+
   let result = {
     html: serializeHTML(ctx),
     warnings: Array.from(ctx.warnings),
diff --git a/packages/dom/src/serialize-frames.js b/packages/dom/src/serialize-frames.js
index ed2e90bb5..22fb744e0 100644
--- a/packages/dom/src/serialize-frames.js
+++ b/packages/dom/src/serialize-frames.js
@@ -12,7 +12,7 @@ function setBaseURI(dom) {
 }
 
 // Recursively serializes iframe documents into srcdoc attributes.
-export function serializeFrames({ dom, clone, warnings, resources, enableJavaScript }) {
+export function serializeFrames({ dom, clone, warnings, resources, enableJavaScript, disableShadowDOM }) {
   for (let frame of dom.querySelectorAll('iframe')) {
     let percyElementId = frame.getAttribute('data-percy-element-id');
     let cloneEl = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
@@ -20,7 +20,7 @@ export function serializeFrames({ dom, clone, warnings, resources, enableJavaScr
 
     // delete frames within the head since they usually break pages when
     // rerendered and do not effect the visuals of a page
-    if (clone.head.contains(cloneEl)) {
+    if (clone.head?.contains(cloneEl)) {
       cloneEl.remove();
 
     // if the frame document is accessible and not empty, we can serialize it
@@ -35,7 +35,8 @@ export function serializeFrames({ dom, clone, warnings, resources, enableJavaScr
       let serialized = serializeDOM({
         domTransformation: setBaseURI,
         dom: frame.contentDocument,
-        enableJavaScript
+        enableJavaScript,
+        disableShadowDOM
       });
 
       // append serialized warnings and resources
diff --git a/packages/dom/src/serialize-inputs.js b/packages/dom/src/serialize-inputs.js
index 5358f5296..39bb04b27 100644
--- a/packages/dom/src/serialize-inputs.js
+++ b/packages/dom/src/serialize-inputs.js
@@ -1,5 +1,5 @@
 // Translates JavaScript properties of inputs into DOM attributes.
-export function serializeInputElements({ dom, clone }) {
+export function serializeInputElements({ dom, clone, warnings }) {
   for (let elem of dom.querySelectorAll('input, textarea, select')) {
     let inputId = elem.getAttribute('data-percy-element-id');
     let cloneEl = clone.querySelector(`[data-percy-element-id="${inputId}"]`);
diff --git a/packages/dom/src/serialize-video.js b/packages/dom/src/serialize-video.js
index 88924dc03..514472c95 100644
--- a/packages/dom/src/serialize-video.js
+++ b/packages/dom/src/serialize-video.js
@@ -1,7 +1,7 @@
 import { resourceFromDataURL } from './utils.js';
 
 // Captures the current frame of videos and sets the poster image
-export function serializeVideos({ dom, clone, resources }) {
+export function serializeVideos({ dom, clone, resources, warnings }) {
   for (let video of dom.querySelectorAll('video')) {
     // if the video already has a poster image, no work for us to do
     if (video.getAttribute('poster')) continue;
@@ -14,7 +14,7 @@ export function serializeVideos({ dom, clone, resources }) {
     let dataUrl;
 
     canvas.getContext('2d').drawImage(video, 0, 0, width, height);
-    try { dataUrl = canvas.toDataURL(); } catch {}
+    try { dataUrl = canvas.toDataURL(); } catch (e) { warnings.add(`data-percy-element-id="${videoId}" : ${e.toString()}`); }
 
     // if the canvas produces a blank image, skip
     if (!dataUrl || dataUrl === 'data:,') continue;
diff --git a/packages/dom/src/utils.js b/packages/dom/src/utils.js
index 8f8cd7b6d..ff9c72546 100644
--- a/packages/dom/src/utils.js
+++ b/packages/dom/src/utils.js
@@ -13,3 +13,15 @@ export function resourceFromDataURL(uid, dataURL) {
   // return the url, base64 content, and mimetype
   return { url, content, mimetype };
 }
+
+export function resourceFromText(uid, mimetype, data) {
+  // build a URL for the serialized asset
+  let [, ext] = mimetype.split('/');
+  let path = `/__serialized__/${uid}.${ext}`;
+  let url = new URL(path, document.URL).toString();
+  // converts text to base64
+  let content = window.btoa(data);
+
+  // return the url, base64 content, and mimetype
+  return { url, content, mimetype };
+}
diff --git a/packages/dom/test/helpers.js b/packages/dom/test/helpers.js
index caa338dc6..2877d3404 100644
--- a/packages/dom/test/helpers.js
+++ b/packages/dom/test/helpers.js
@@ -1,18 +1,34 @@
+
+export const chromeBrowser = 'CHROME';
+export const firefoxBrowser = 'FIREFOX';
+
 // create and cleanup testing DOM
-export function withExample(html) {
+export function withExample(html, options = { withShadow: true }) {
   let $test = document.getElementById('test');
   if ($test) $test.remove();
 
+  let $testShadow = document.getElementById('test-shadow');
+  if ($testShadow) $testShadow.remove();
+
   $test = document.createElement('div');
   $test.id = 'test';
   $test.innerHTML = `<h1>Hello DOM testing</h1>${html}`;
 
   document.body.appendChild($test);
+
+  if (options?.withShadow) {
+    $testShadow = document.createElement('div');
+    $testShadow.id = 'test-shadow';
+    let $shadow = $testShadow.attachShadow({ mode: 'open' });
+    $shadow.innerHTML = `<h1>Hello DOM testing</h1>${html}`;
+
+    document.body.appendChild($testShadow);
+  }
   return document;
 }
 
 // create a stylesheet in the DOM and add rules using the CSSOM
-export function withCSSOM(rules = [], prepare = () => {}) {
+export function withCSSOM(rules = [], prepare = () => {}, options = { withShadow: true }) {
   let $test = document.getElementById('test');
   let $style = document.getElementById('test-style');
   if ($style) $style.remove();
@@ -26,6 +42,22 @@ export function withCSSOM(rules = [], prepare = () => {}) {
   for (let rule of [].concat(rules)) {
     $style.sheet.insertRule(rule);
   }
+
+  if (options?.withShadow) {
+    let $testShadow = document.getElementById('test-shadow').shadowRoot;
+    let $shadowStyle = $testShadow.getElementById('test-style');
+    if ($shadowStyle) $shadowStyle.remove();
+
+    $shadowStyle = document.createElement('style');
+    $shadowStyle.id = 'test-style';
+    $shadowStyle.type = 'text/css';
+    prepare?.($shadowStyle);
+    $testShadow.prepend($shadowStyle);
+
+    for (let rule of [].concat(rules)) {
+      $shadowStyle.sheet.insertRule(rule);
+    }
+  }
 }
 
 // replaces the current document's doctype
@@ -40,12 +72,57 @@ export function replaceDoctype(name, publicId = '', systemId = '') {
 }
 
 // parses a DOM string into a DOM object and returns a querySelectorAll shortcut
-export function parseDOM(domstring) {
+export function parseDOM(domstring, platform) {
+  if (platform === 'shadow') {
+    return parseDeclShadowDOM(domstring);
+  }
   if (domstring.html) domstring = domstring.html;
   let dom = new window.DOMParser().parseFromString(domstring, 'text/html');
   return selector => dom.querySelectorAll(selector);
 }
 
+export function parseDeclShadowDOM(domstring) {
+  if (domstring.html) domstring = domstring.html;
+  let dom = new window.DOMParser().parseFromString(domstring, 'text/html');
+  let root = dom.getElementById('test-shadow');
+
+  return selector => root.firstChild.content.querySelectorAll(selector);
+}
+
+export function createShadowEl(tag = 0) {
+  const contentEl = document.createElement('div');
+  contentEl.id = `Percy-${tag}`;
+  const shadow = contentEl.attachShadow({ mode: 'open' });
+  const paragraphEl = document.createElement('p');
+  paragraphEl.textContent = `Percy-${tag}`;
+  shadow.appendChild(paragraphEl);
+  return contentEl;
+}
+
+export function getTestBrowser() {
+  if (navigator.userAgent.toLowerCase().includes('chrome')) {
+    return chromeBrowser;
+  } else if (navigator.userAgent.toLowerCase().includes('firefox')) {
+    return firefoxBrowser;
+  } else {
+    throw new Error('unsupported test browser');
+  }
+}
+
+export const platforms = (() => {
+  if (getTestBrowser() === chromeBrowser) {
+    return ['plain', 'shadow'];
+  }
+  return ['plain'];
+})();
+
+export function platformDOM(plat) {
+  if (plat === 'shadow') {
+    return document.getElementById('test-shadow')?.shadowRoot;
+  }
+  return document;
+}
+
 // generic assert
 export function assert(condition, message) {
   if (!condition) throw new Error(message);
diff --git a/packages/dom/test/inject-polyfill.test.js b/packages/dom/test/inject-polyfill.test.js
new file mode 100644
index 000000000..bbb8ecc20
--- /dev/null
+++ b/packages/dom/test/inject-polyfill.test.js
@@ -0,0 +1,26 @@
+import injectDeclarativeShadowDOMPolyfill from '../src/inject-polyfill';
+import { withExample } from './helpers';
+
+describe('injectDeclarativeShadowDOMPolyfill', () => {
+  let dom;
+
+  beforeEach(() => {
+    dom = withExample(`
+        <div data-percy-shadow-host>
+        <template shadowroot="open">
+                <div data-percy-shadow-host>
+                    <template shadowroot="open">
+                    </template>
+                </div>
+        </template>
+        </div>
+        `, { withShadow: false });
+
+    let ctx = { clone: dom };
+    injectDeclarativeShadowDOMPolyfill(ctx);
+  });
+
+  it('All template tags are converted to Shadow DOM', () => {
+    expect(Array.from(dom.documentElement.innerHTML.matchAll(/<\/template>/g)).length).toBe(0);
+  });
+});
diff --git a/packages/dom/test/serialize-canvas.test.js b/packages/dom/test/serialize-canvas.test.js
index c6fef5b61..19a16f2f3 100644
--- a/packages/dom/test/serialize-canvas.test.js
+++ b/packages/dom/test/serialize-canvas.test.js
@@ -1,8 +1,8 @@
-import { withExample, parseDOM } from './helpers';
+import { withExample, parseDOM, platforms, platformDOM } from './helpers';
 import serializeDOM from '@percy/dom';
 
 describe('serializeCanvas', () => {
-  let $, serialized, dataURL;
+  let serialized, cache = { shadow: {}, plain: {} };
 
   beforeEach(() => {
     withExample(`
@@ -17,55 +17,65 @@ describe('serializeCanvas', () => {
         width="0px"
         height="0px"
       ></canvas>
-    `);
+    `
+    );
+    platforms.forEach((plat) => {
+      let dom = platformDOM(plat);
+      let canvas = dom.getElementById('canvas');
+      let ctx = canvas.getContext('2d');
 
-    let canvas = document.getElementById('canvas');
-    let ctx = canvas.getContext('2d');
+      ctx.beginPath();
+      ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
+      ctx.moveTo(110, 75);
+      ctx.arc(75, 75, 35, 0, Math.PI, false);
+      ctx.moveTo(65, 65);
+      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
+      ctx.moveTo(95, 65);
+      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
+      ctx.stroke();
 
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
-    ctx.stroke();
+      cache[plat].dataURL = canvas.toDataURL();
+    });
 
     serialized = serializeDOM();
-    $ = parseDOM(serialized.html);
-    dataURL = canvas.toDataURL();
   });
 
-  it('serializes canvas elements', () => {
-    let $canvas = $('#canvas');
-    expect($canvas[0].tagName).toBe('IMG');
-    expect($canvas[0].getAttribute('width')).toBe('150px');
-    expect($canvas[0].getAttribute('height')).toBe('150px');
-    expect($canvas[0].getAttribute('src')).toMatch('/__serialized__/\\w+\\.png');
-    expect($canvas[0].getAttribute('style')).toBe('border: 5px solid black; max-width: 100%;');
-    expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(true);
+  platforms.forEach((platform) => {
+    let $;
+    beforeEach(() => {
+      $ = parseDOM(serialized.html, platform);
+    });
 
-    expect(serialized.resources).toEqual([{
-      url: $canvas[0].getAttribute('src'),
-      content: dataURL.split(',')[1],
-      mimetype: 'image/png'
-    }]);
-  });
+    it(`${platform}: serializes canvas elements`, () => {
+      let $canvas = $('#canvas');
+      expect($canvas[0].tagName).toBe('IMG');
+      expect($canvas[0].getAttribute('width')).toBe('150px');
+      expect($canvas[0].getAttribute('height')).toBe('150px');
+      expect($canvas[0].getAttribute('src')).toMatch('/__serialized__/\\w+\\.png');
+      expect($canvas[0].getAttribute('style')).toBe('border: 5px solid black; max-width: 100%;');
+      expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(true);
 
-  it('does not serialize canvas elements when JS is enabled', () => {
-    serialized = serializeDOM({ enableJavaScript: true });
-    $ = parseDOM(serialized.html);
+      expect(serialized.resources).toContain(jasmine.objectContaining({
+        url: $canvas[0].getAttribute('src'),
+        content: cache[platform].dataURL.split(',')[1],
+        mimetype: 'image/png'
+      }));
+    });
 
-    let $canvas = $('#canvas');
-    expect($canvas[0].tagName).toBe('CANVAS');
-    expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(false);
-    expect(serialized.resources).toEqual([]);
-  });
+    it(`${platform}: does not serialize canvas elements when JS is enabled`, () => {
+      serialized = serializeDOM({ enableJavaScript: true });
+      $ = parseDOM(serialized.html, platform);
+
+      let $canvas = $('#canvas');
+      expect($canvas[0].tagName).toBe('CANVAS');
+      expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(false);
+      expect(serialized.resources).toEqual([]);
+    });
 
-  it('does not serialize empty canvas elements', () => {
-    let $canvas = $('#empty');
-    expect($canvas[0].tagName).toBe('CANVAS');
-    expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(false);
+    it(`${platform}: does not serialize empty canvas elements`, () => {
+      let $canvas = $('#empty');
+      expect($canvas[0].tagName).toBe('CANVAS');
+      expect($canvas[0].matches('[data-percy-canvas-serialized]')).toBe(false);
+    });
   });
 });
diff --git a/packages/dom/test/serialize-css.test.js b/packages/dom/test/serialize-css.test.js
index b0e4ea672..f48e0a00d 100644
--- a/packages/dom/test/serialize-css.test.js
+++ b/packages/dom/test/serialize-css.test.js
@@ -1,5 +1,7 @@
-import { withExample, withCSSOM, parseDOM } from './helpers';
+import { withExample, withCSSOM, parseDOM, platforms, platformDOM, createShadowEl } from './helpers';
 import serializeDOM from '@percy/dom';
+import serializeCSSOM from '../src/serialize-cssom';
+import { cloneNodeAndShadow } from '../src/clone-dom';
 
 describe('serializeCSSOM', () => {
   beforeEach(() => {
@@ -10,46 +12,173 @@ describe('serializeCSSOM', () => {
     withExample(`<div class="box"></div>${link}${mod}${style}`);
     withCSSOM('.box { height: 500px; }');
 
-    let modCSSRule = document.getElementById('mod').sheet.cssRules[0];
-    if (modCSSRule) modCSSRule.style.cssText = 'width: 1000px';
+    platforms.forEach((platform) => {
+      let modCSSRule = platformDOM(platform).getElementById('mod').sheet.cssRules[0];
+      if (modCSSRule) modCSSRule.style.cssText = 'width: 1000px';
+    });
 
     // give the linked style a few milliseconds to load
     return new Promise(r => setTimeout(r, 100));
   });
 
-  it('serializes CSSOM and does not mutate the orignal DOM', () => {
-    let $cssom = parseDOM(serializeDOM())('[data-percy-cssom-serialized]');
+  platforms.forEach((platform) => {
+    let dom;
+    beforeEach(() => {
+      dom = platformDOM(platform);
+    });
 
-    // linked and unmodified stylesheets are not included
-    expect($cssom).toHaveSize(2);
-    expect($cssom[0].innerHTML).toBe('.box { height: 500px; }');
-    expect($cssom[1].innerHTML).toBe('.box { width: 1000px; }');
+    it('skips serialization when data-percy-element-id is not found', () => {
+      if (platform !== 'plain') {
+        return;
+      }
 
-    expect(document.styleSheets[0].ownerNode.innerText).toBe('');
-    expect(document.styleSheets[1].ownerNode.innerText).toBe('');
-    expect(document.styleSheets[2].ownerNode.innerText).toBe('.box { width: 500px; }');
-    expect(document.styleSheets[3].ownerNode.innerText).toBe('.box { background: green; }');
-    expect(document.querySelectorAll('[data-percy-cssom-serialized]')).toHaveSize(0);
-  });
+      let ctx = {
+        dom,
+        resources: new Set(),
+        warnings: new Set(),
+        cache: new Map(),
+        enableJavaScript: false,
+        disableShadowDOM: false
+      };
+      ctx.clone = cloneNodeAndShadow(ctx);
+      // remove marker id from all 3 stylesheets
+      Array.from(ctx.dom.styleSheets).forEach(stylesheet => { stylesheet.ownerNode.removeAttribute('data-percy-element-id'); });
+      serializeCSSOM(ctx);
+      expect(ctx.warnings).toHaveSize(3);
+    });
 
-  it('does not break the CSSOM by adding new styles after serializing', () => {
-    let cssomSheet = document.styleSheets[0];
+    it(`${platform}: serializes CSSOM and does not mutate the orignal DOM`, () => {
+      let $cssom = parseDOM(serializeDOM(), platform)('[data-percy-cssom-serialized]');
 
-    // serialize DOM
-    serializeDOM();
+      // linked and unmodified stylesheets are not included
+      expect($cssom).toHaveSize(2);
+      expect($cssom[0].innerHTML).toBe('.box { height: 500px; }');
+      expect($cssom[1].innerHTML).toBe('.box { width: 1000px; }');
 
-    // delete the old rule and create a new one
-    cssomSheet.deleteRule(0);
-    cssomSheet.insertRule('.box { height: 200px; width: 200px; background-color: blue; }');
+      expect(dom.styleSheets[0].ownerNode.innerText).toBe('');
+      expect(dom.styleSheets[1].ownerNode.innerText).toBe('');
+      expect(dom.styleSheets[2].ownerNode.innerText).toBe('.box { width: 500px; }');
+      expect(dom.styleSheets[3].ownerNode.innerText).toBe('.box { background: green; }');
+      expect(dom.querySelectorAll('[data-percy-cssom-serialized]')).toHaveSize(0);
+    });
 
-    expect(cssomSheet.cssRules).toHaveSize(1);
-    expect(cssomSheet.cssRules[0].cssText)
-      .toBe('.box { height: 200px; width: 200px; background-color: blue; }');
-  });
+    it(`${platform}: does not break the CSSOM by adding new styles after serializing`, () => {
+      let cssomSheet = dom.styleSheets[0];
+
+      // serialize DOM
+      serializeDOM();
+
+      // delete the old rule and create a new one
+      cssomSheet.deleteRule(0);
+      cssomSheet.insertRule('.box { height: 200px; width: 200px; background-color: blue; }');
+
+      expect(cssomSheet.cssRules).toHaveSize(1);
+      expect(cssomSheet.cssRules[0].cssText)
+        .toBe('.box { height: 200px; width: 200px; background-color: blue; }');
+    });
+
+    it(`${platform}: does not serialize the CSSOM when JS is enabled`, () => {
+      const serializedDOM = serializeDOM({ enableJavaScript: true });
+      let $ = parseDOM(serializedDOM, platform);
+      expect(dom.styleSheets[0]).toHaveProperty('ownerNode.innerText', '');
+      expect($('[data-percy-cssom-serialized]')).toHaveSize(0);
+    });
+
+    it('captures adoptedStylesheets inside document', () => {
+      if (platform !== 'plain') {
+        return;
+      }
+      withExample('<div>AdoptedStyle</div>', { withShadow: false });
+      const sheet = new window.CSSStyleSheet();
+      const style = 'div { background: blue; }';
+      sheet.replaceSync(style);
+      dom.adoptedStyleSheets = [sheet];
+      const capture = serializeDOM();
+      let $ = parseDOM(capture, 'plain');
+      dom.adoptedStyleSheets = [];
+      expect($('body')[0].innerHTML).toMatch(`<link rel="stylesheet" href="${capture.resources[0].url}">`);
+    });
+
+    it('captures adoptedStylesheets', () => {
+      if (platform === 'plain') {
+        return;
+      }
+
+      withExample('<div id="box"></div>', { withShadow: false });
+      const box = document.querySelector('#box');
+      const sheet = new window.CSSStyleSheet();
+      const style = 'p { color: blue; }';
+      sheet.replaceSync(style);
+      const shadowEl = createShadowEl();
+      shadowEl.shadowRoot.adoptedStyleSheets = [sheet];
+      box.appendChild(shadowEl);
+
+      const capture = serializeDOM();
+      let $ = parseDOM(capture, 'plain');
+
+      const resultShadowEl = $('#Percy-0')[0];
+      expect(capture.resources).toEqual(jasmine.arrayContaining([{
+        url: jasmine.stringMatching('\\.css$'),
+        content: window.btoa(style),
+        mimetype: 'text/css'
+      }]));
+
+      expect(resultShadowEl.innerHTML).toEqual([
+        '<template shadowroot="open">',
+        `<link rel="stylesheet" href="${capture.resources[0].url}">`,
+        '<p>Percy-0</p>',
+        '</template>'
+      ].join(''));
+
+      shadowEl.shadowRoot.adoptedStyleSheets = [];
+    });
+
+    it('uses single resource for same adoptedStylesheet', () => {
+      if (platform === 'plain') {
+        return;
+      }
+
+      withExample('<div id="box"></div>', { withShadow: false });
+      const box = document.querySelector('#box');
+      const sheet = new window.CSSStyleSheet();
+      const style = 'p { color: blue; }';
+      sheet.replaceSync(style);
+      const sheet2 = new window.CSSStyleSheet();
+      const style2 = 'div {border: 1px solid black;}';
+      sheet2.replaceSync(style2);
+      const shadowEl = createShadowEl();
+      const shadowElChild = createShadowEl(1);
+      shadowEl.shadowRoot.adoptedStyleSheets = [sheet];
+      shadowElChild.shadowRoot.adoptedStyleSheets = [sheet, sheet2];
+
+      shadowEl.appendChild(shadowElChild);
+      box.appendChild(shadowEl);
+
+      const capture = serializeDOM();
+      expect(capture.resources.length).toEqual(2);
+
+      let $ = parseDOM(capture, 'plain');
+
+      const resultShadowEl = $('#Percy-0')[0];
+      const resultShadowElChild = $('#Percy-1')[0];
+
+      expect(resultShadowEl.innerHTML).toMatch([
+        '<template shadowroot="open">',
+        `<link rel="stylesheet" href="${capture.resources[0].url}">`,
+        '<p>Percy-0</p>',
+        '</template>'
+      ].join(''));
+
+      expect(resultShadowElChild.innerHTML).toMatch([
+        '<template shadowroot="open">',
+        `<link rel="stylesheet" href="${capture.resources[1].url}">`,
+        `<link rel="stylesheet" href="${capture.resources[0].url}">`,
+        '<p>Percy-1</p>',
+        '</template>'
+      ].join(''));
 
-  it('does not serialize the CSSOM when JS is enabled', () => {
-    let $ = parseDOM(serializeDOM({ enableJavaScript: true }));
-    expect(document.styleSheets[0]).toHaveProperty('ownerNode.innerText', '');
-    expect($('[data-percy-cssom-serialized]')).toHaveSize(0);
+      shadowEl.shadowRoot.adoptedStyleSheets = [];
+      shadowElChild.shadowRoot.adoptedStyleSheets = [];
+    });
   });
 });
diff --git a/packages/dom/test/serialize-dom.test.js b/packages/dom/test/serialize-dom.test.js
index cc0119bce..f54a13c46 100644
--- a/packages/dom/test/serialize-dom.test.js
+++ b/packages/dom/test/serialize-dom.test.js
@@ -1,4 +1,4 @@
-import { withExample, replaceDoctype } from './helpers';
+import { withExample, replaceDoctype, createShadowEl, getTestBrowser, chromeBrowser } from './helpers';
 import serializeDOM from '@percy/dom';
 
 describe('serializeDOM', () => {
@@ -34,9 +34,176 @@ describe('serializeDOM', () => {
     expect(serializeDOM().html).toMatch('<!DOCTYPE html>');
   });
 
+  describe('shadow dom', () => {
+    it('renders open root as template tag', () => {
+      if (getTestBrowser() !== chromeBrowser) {
+        return;
+      }
+
+      withExample('<div id="content"></div>', false);
+      const contentEl = document.querySelector('#content');
+      const shadow = contentEl.attachShadow({ mode: 'open' });
+      const paragraphEl = document.createElement('p');
+      paragraphEl.textContent = 'Hey Percy!';
+      shadow.appendChild(paragraphEl);
+
+      const html = serializeDOM().html;
+      expect(html).toMatch('<template shadowroot="open">');
+      expect(html).toMatch('Hey Percy!');
+    });
+
+    it('does not render closed root', () => {
+      if (getTestBrowser() !== chromeBrowser) {
+        return;
+      }
+
+      withExample('<div id="content"></div>', { withShadow: false });
+      const contentEl = document.querySelector('#content');
+      const shadow = contentEl.attachShadow({ mode: 'closed' });
+      const paragraphEl = document.createElement('p');
+      paragraphEl.textContent = 'Hey Percy!';
+      shadow.appendChild(paragraphEl);
+
+      const html = serializeDOM().html;
+      expect(html).not.toMatch('<template shadowroot');
+      expect(html).not.toMatch('Hey Percy!');
+    });
+
+    it('renders single nested ', () => {
+      if (getTestBrowser() !== chromeBrowser) {
+        return;
+      }
+
+      withExample('<div id="content"></div>', { withShadow: false });
+      const baseContent = document.querySelector('#content');
+
+      const el1 = createShadowEl(1);
+      const el2 = createShadowEl(2);
+      el1.shadowRoot.appendChild(el2);
+      baseContent.append(el1);
+
+      const html = serializeDOM().html;
+
+      expect(html).toMatch(new RegExp([
+        '<template shadowroot="open">',
+        '<p>Percy-1</p>',
+        '<div id="Percy-2" .*>',
+        '<template shadowroot="open">',
+        '<p>Percy-2</p>',
+        '</template>'
+      ].join('')));
+    });
+
+    it('renders many nested', () => {
+      if (getTestBrowser() !== chromeBrowser) {
+        return;
+      }
+      withExample('<div id="content"></div>', { withShadow: false });
+      const baseContent = document.querySelector('#content');
+
+      const levels = 1000;
+
+      let j = levels, el = null;
+      let matchRegex = '';
+
+      while (j--) {
+        let newEl = createShadowEl(j);
+        if (el) {
+          el.shadowRoot.appendChild(newEl);
+        } else {
+          baseContent.appendChild(newEl);
+        }
+        el = newEl;
+        matchRegex += [
+          `<div id="Percy-${j}" .*>`,
+          '<template shadowroot="open">',
+          `<p>Percy-${j}</p>`
+        ].join('');
+      }
+
+      const html = serializeDOM().html;
+      expect(html).toMatch(new RegExp(matchRegex));
+    });
+
+    it('renders many flat', () => {
+      if (!navigator.userAgent.toLowerCase().includes('chrome')) {
+        return;
+      }
+      withExample('<div id="content"></div>', { withShadow: false });
+      const baseContent = document.querySelector('#content');
+
+      const levels = 1000;
+
+      let j = levels, matchRegex = '';
+
+      while (j--) {
+        let newEl = createShadowEl(j);
+        baseContent.appendChild(newEl);
+        matchRegex += [
+          `<div id="Percy-${j}" .*>`,
+          '<template shadowroot="open">',
+          `<p>Percy-${j}</p>`,
+          '</template>',
+          '</div>'
+        ].join('');
+      }
+
+      const html = serializeDOM().html;
+      expect(html).toMatch(new RegExp(matchRegex));
+    });
+
+    it('respects disableShadowDOM', () => {
+      if (!navigator.userAgent.toLowerCase().includes('chrome')) {
+        return;
+      }
+      withExample('<div id="content"></div>', { withShadow: false });
+      const baseContent = document.querySelector('#content');
+      const el = createShadowEl(8);
+      baseContent.appendChild(el);
+
+      const html = serializeDOM({ disableShadowDOM: true }).html;
+      expect(html).not.toMatch('<p>Percy-8</p>');
+      expect(html).not.toMatch('data-percy-shadow-host=');
+    });
+
+    it('renders custom elements properly', () => {
+      if (getTestBrowser() !== chromeBrowser) {
+        return;
+      }
+      class TestElement extends window.HTMLElement {
+        constructor() {
+          super();
+          // super();
+          // Create a shadow root
+          const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
+          const wrapper = document.createElement('h2');
+          wrapper.innerText = 'Test';
+          shadow.appendChild(wrapper);
+        }
+      }
+
+      window.customElements.define('test-elem', TestElement);
+
+      withExample('<test-elem/>', { withShadow: false });
+      const html = serializeDOM().html;
+      expect(html).toMatch('<h2>Test</h2>');
+    });
+
+    it('warns if data-percy-shadow-host incorrectly marked', () => {
+      if (!navigator.userAgent.toLowerCase().includes('chrome')) {
+        return;
+      }
+      withExample('<div id="content" data-percy-shadow-host=""></div>', { withShadow: false });
+      const baseContent = document.querySelector('#content');
+      baseContent.innerHTML = '<input type="text>';
+      const serialized = serializeDOM();
+      expect(serialized.warnings).toEqual(['data-percy-shadow-host does not have shadowRoot']);
+    });
+  });
+
   describe('with `domTransformation`', () => {
     beforeEach(() => {
-      withExample('<span class="delete-me">Delete me</span>');
+      withExample('<span class="delete-me">Delete me</span>', { withShadow: false });
       spyOn(console, 'error');
     });
 
diff --git a/packages/dom/test/serialize-frames.test.js b/packages/dom/test/serialize-frames.test.js
index ca31be0b5..2059a42c5 100644
--- a/packages/dom/test/serialize-frames.test.js
+++ b/packages/dom/test/serialize-frames.test.js
@@ -1,12 +1,12 @@
-import I, { when } from 'interactor.js';
-import { assert, withExample, parseDOM } from './helpers';
+import { when } from 'interactor.js';
+import { assert, withExample, parseDOM, platforms, platformDOM } from './helpers';
 import serializeDOM from '@percy/dom';
 
 describe('serializeFrames', () => {
-  let $, serialized;
+  let serialized, cache = { shadow: {}, plain: {} };
 
-  const getFrame = id => when(() => {
-    let $frame = document.getElementById(id);
+  const getFrame = (id, dom = document) => when(() => {
+    let $frame = dom.getElementById(id);
     let accessible = !!$frame.contentDocument;
     let loaded = accessible && $frame.contentWindow.performance.timing.loadEventEnd;
     assert(!accessible || loaded, `#${id} did not load in time`);
@@ -28,100 +28,115 @@ describe('serializeFrames', () => {
       )"></iframe>
     `);
 
-    let $frameInput = await getFrame('frame-input');
-    await I.type(() => $frameInput.contentDocument.querySelector('input'), 'iframe with an input');
+    for (const platform of platforms) {
+      let dom = platformDOM(platform);
+      let $frameInput = await getFrame('frame-input', dom);
+      $frameInput.contentDocument.querySelector('input').value = 'iframe with an input';
 
-    let $frameJS = await getFrame('frame-js-no-src');
-    $frameJS.contentDocument.body.innerHTML = '<p>generated iframe</p><canvas id="canvas"/>';
-    let $ctx = $frameJS.contentDocument.getElementById('canvas').getContext('2d');
-    $ctx.fillRect(0, 0, 10, 10);
+      let $frameJS = await getFrame('frame-js-no-src', dom);
+      $frameJS.contentDocument.body.innerHTML = '<p>generated iframe</p><canvas id="canvas"/>';
+      let $ctx = $frameJS.contentDocument.getElementById('canvas').getContext('2d');
+      $ctx.fillRect(0, 0, 10, 10);
 
-    let $frameEmpty = await getFrame('frame-empty');
-    await I.type(() => $frameEmpty.contentDocument.querySelector('input'), 'no document element');
-    Object.defineProperty($frameEmpty.contentDocument, 'documentElement', { value: null });
+      let $frameEmpty = await getFrame('frame-empty', dom);
+      $frameEmpty.contentDocument.querySelector('input').value = 'no document element';
+      Object.defineProperty($frameEmpty.contentDocument, 'documentElement', { value: null });
 
-    let $frameHead = document.createElement('iframe');
-    $frameHead.id = 'frame-head';
-    document.head.appendChild($frameHead);
+      let $frameHead = document.createElement('iframe');
+      $frameHead.id = 'frame-head';
+      document.head.appendChild($frameHead);
 
-    let $frameInject = document.createElement('iframe');
-    $frameInject.id = 'frame-inject';
-    $frameInject.src = 'javascript:false';
-    $frameInject.sandbox = '';
-    document.getElementById('test').appendChild($frameInject);
+      let $frameInject = document.createElement('iframe');
+      $frameInject.id = 'frame-inject';
+      $frameInject.src = 'javascript:false';
+      $frameInject.sandbox = '';
+      document.getElementById('test').appendChild($frameInject);
 
-    // ensure external frame has loaded for coverage
-    await getFrame('frame-external');
+      // ensure external frame has loaded for coverage
+      await getFrame('frame-external', dom);
 
-    serialized = serializeDOM();
-    $ = parseDOM(serialized.html);
+      serialized = serializeDOM();
+      cache[platform].$ = parseDOM(serialized.html, platform);
+    }
   }, 0); // frames may take a bit to load
 
-  afterEach(() => {
-    document.querySelector('#frame-head').remove();
-  });
-
-  it('serializes iframes created with JS', () => {
-    expect($('#frame-js')[0].getAttribute('src')).toBeNull();
-    expect($('#frame-js')[0].getAttribute('srcdoc')).toBe([
-      '<!DOCTYPE html><html><head>',
-      `<base href="${$('#frame-js')[0].baseURI}">`,
-      '</head><body>',
-      '<p>made with js src</p>',
-      '</body></html>'
-    ].join(''));
-
-    expect($('#frame-js-no-src')[0].getAttribute('src')).toBeNull();
-    expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toMatch([
-      '<!DOCTYPE html><html><head>',
-      `<base href="${$('#frame-js-no-src')[0].baseURI}">`,
-      '</head><body>',
-      '<p>generated iframe</p>',
-      '<img .*data-percy-canvas-serialized.*>',
-      '</body></html>'
-    ].join(''));
-
-    // frame resources are serialized recursively
-    expect(serialized.resources).toEqual([{
-      url: jasmine.stringMatching('/__serialized__/\\w+\\.png'),
-      content: jasmine.any(String),
-      mimetype: 'image/png'
-    }]);
-  });
-
-  it('serializes iframes that have been interacted with', () => {
-    expect($('#frame-input')[0].getAttribute('srcdoc')).toMatch(new RegExp([
-      '^<!DOCTYPE html><html><head>.*?</head><body>',
-      '<input data-percy-element-id=".+?" value="iframe with an input">',
-      '</body></html>$'
-    ].join('')));
-  });
-
-  it('does not serialize iframes with CORS', () => {
-    expect($('#frame-external')[0].getAttribute('src')).toBe('https://example.com');
-    expect($('#frame-external-fail')[0].getAttribute('src')).toBe('https://google.com');
-    expect($('#frame-external')[0].getAttribute('srcdoc')).toBeNull();
-    expect($('#frame-external-fail')[0].getAttribute('srcdoc')).toBeNull();
-  });
-
-  it('does not serialize iframes created by JS when JS is enabled', () => {
-    $ = parseDOM(serializeDOM({ enableJavaScript: true }));
-    expect($('#frame-js')[0].getAttribute('src')).not.toBeNull();
-    expect($('#frame-js')[0].getAttribute('srcdoc')).toBeNull();
-    expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toBeNull();
-  });
-
-  it('does not serialize iframes without document elements', () => {
-    expect($('#frame-empty')[0]).toBeDefined();
-    expect($('#frame-empty')[0].getAttribute('srcdoc')).toBe('<input/>');
-    expect($('#frame-empty-self')).toHaveSize(0);
-  });
-
-  it('removes iframes from the head element', () => {
-    expect($('#frame-head')).toHaveSize(0);
-  });
-
-  it('removes inaccessible JS frames', () => {
-    expect($('#frame-inject')).toHaveSize(0);
+  platforms.forEach(platform => {
+    let $;
+    beforeEach(() => {
+      $ = cache[platform].$;
+    });
+
+    afterEach(() => {
+      document.querySelector('#frame-head').remove();
+    });
+
+    it(`${platform}: serializes iframes created with JS`, () => {
+      expect($('#frame-js')[0].getAttribute('src')).toBeNull();
+      expect($('#frame-js')[0].getAttribute('srcdoc')).toMatch(new RegExp([
+        '<!DOCTYPE html><html><head>',
+        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
+        `<base href="${$('#frame-js')[0].baseURI}">`,
+        '</head><body>',
+        '<p>made with js src</p>',
+        '</body></html>'
+      ].join('')));
+
+      expect($('#frame-js-no-src')[0].getAttribute('src')).toBeNull();
+      expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toMatch([
+        '<!DOCTYPE html><html><head>',
+        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
+        `<base href="${$('#frame-js-no-src')[0].baseURI}">`,
+        '</head><body>',
+        '<p>generated iframe</p>',
+        '<img .*data-percy-canvas-serialized.*>',
+        '</body></html>'
+      ].join(''));
+
+      // frame resources are serialized recursively
+      expect(serialized.resources).toContain(jasmine.objectContaining({
+        url: jasmine.stringMatching('/__serialized__/\\w+\\.png'),
+        content: jasmine.any(String),
+        mimetype: 'image/png'
+      }));
+    });
+
+    it(`${platform}: serializes iframes that have been interacted with`, () => {
+      expect($('#frame-input')[0].getAttribute('srcdoc')).toMatch(new RegExp([
+        '^<!DOCTYPE html><html><head>',
+        '<script id="__percy_shadowdom_helper" data-percy-injected="true">.*</script>',
+        '.*?</head><body>',
+        '<input data-percy-element-id=".+?" value="iframe with an input">',
+        '</body></html>$'
+      ].join('')));
+    });
+
+    it(`${platform}: does not serialize iframes with CORS`, () => {
+      expect($('#frame-external')[0].getAttribute('src')).toBe('https://example.com');
+      expect($('#frame-external-fail')[0].getAttribute('src')).toBe('https://google.com');
+      expect($('#frame-external')[0].getAttribute('srcdoc')).toBeNull();
+      expect($('#frame-external-fail')[0].getAttribute('srcdoc')).toBeNull();
+    });
+
+    it(`${platform}: does not serialize iframes created by JS when JS is enabled`, () => {
+      const serializedDOM = serializeDOM({ enableJavaScript: true }).html;
+      $ = parseDOM(serializedDOM, platform);
+      expect($('#frame-js')[0].getAttribute('src')).not.toBeNull();
+      expect($('#frame-js')[0].getAttribute('srcdoc')).toBeNull();
+      expect($('#frame-js-no-src')[0].getAttribute('srcdoc')).toBeNull();
+    });
+
+    it(`${platform}: does not serialize iframes without document elements`, () => {
+      expect($('#frame-empty')[0]).toBeDefined();
+      expect($('#frame-empty')[0].getAttribute('srcdoc')).toBe('<input/>');
+      expect($('#frame-empty-self')).toHaveSize(0);
+    });
+
+    it(`${platform}: removes iframes from the head element`, () => {
+      expect($('#frame-head')).toHaveSize(0);
+    });
+
+    it(`${platform}: removes inaccessible JS frames`, () => {
+      expect($('#frame-inject')).toHaveSize(0);
+    });
   });
 });
diff --git a/packages/dom/test/serialize-inputs.test.js b/packages/dom/test/serialize-inputs.test.js
index d751f9408..da37f106a 100644
--- a/packages/dom/test/serialize-inputs.test.js
+++ b/packages/dom/test/serialize-inputs.test.js
@@ -1,9 +1,8 @@
-import I from 'interactor.js';
-import { withExample, parseDOM } from './helpers';
+import { withExample, parseDOM, platforms, platformDOM } from './helpers';
 import serializeDOM from '@percy/dom';
 
 describe('serializeInputs', () => {
-  let $;
+  let cache = { shadow: {}, plain: {} };
 
   beforeEach(async () => {
     withExample(`
@@ -44,85 +43,106 @@ describe('serializeInputs', () => {
       </form>
     `);
 
+    platforms.forEach((platform) => {
+      const dom = platformDOM(platform);
+      dom.querySelector('#name').value = 'Bob Boberson';
+      dom.querySelector('#valueAttr').value = 'Replacement Value!';
+      dom.querySelector('#feedback').value = 'This is my feedback... And it is not very helpful';
+      dom.querySelector('#radio').checked = true;
+      dom.querySelector('#mailing').checked = true;
+      dom.querySelector('#singleSelect').value = 'maybe';
+
+      const selected = ['Shelby GT350', 'NA Miata'];
+      Array.from(dom.querySelector('#multiselect').options).forEach(function(option) {
+        // If the option's value is in the selected array, select it
+        // Otherwise, deselect it
+        if (selected.includes(option.innerText)) {
+          option.selected = true;
+        } else {
+          option.selected = false;
+        }
+      });
+      cache[platform].dom = dom;
+      cache[platform].$ = parseDOM(serializeDOM(), platform);
+    });
     // interact with the inputs to update properties (does not update attributes)
-    await I('form')
-      .find('#name').type('Bob Boberson')
-      .find('#valueAttr').type('Replacement Value!', { range: [0, 500] })
-      .find('#feedback').type('This is my feedback... And it is not very helpful')
-      .find('#radio').check()
-      .find('#singleSelect').select(I.find.text('Maybe'))
-      .find('#multiselect').select([I.find.text('Shelby GT350'), I.find.text('NA Miata')])
-      .find('#mailing').check();
-
-    $ = parseDOM(serializeDOM());
   });
 
-  it('serializes checked checkboxes', () => {
-    expect($('#mailing')[0].checked).toBe(true);
-  });
-
-  it('leaves unchecked checkboxes alone', () => {
-    expect($('#nevercheckedradio')[0].checked).toBe(false);
-  });
-
-  it('serializes checked radio buttons', () => {
-    expect($('#radio')[0].checked).toBe(true);
-  });
-
-  it('serializes textareas', () => {
-    expect($('#feedback')[0].innerText).toBe('This is my feedback... And it is not very helpful');
-  });
-
-  it('serializes input elements', () => {
-    expect($('#name')[0].getAttribute('value')).toBe('Bob Boberson');
-  });
-
-  it('serializes single select elements', () => {
-    expect($('#singleSelect>:nth-child(1)')[0].selected).toBe(false);
-    expect($('#singleSelect>:nth-child(2)')[0].selected).toBe(false);
-    expect($('#singleSelect>:nth-child(3)')[0].selected).toBe(true);
-  });
-
-  it('serializes multi-select elements', () => {
-    expect($('#multiselect>:nth-child(1)')[0].selected).toBe(true);
-    expect($('#multiselect>:nth-child(2)')[0].selected).toBe(false);
-    expect($('#multiselect>:nth-child(3)')[0].selected).toBe(true);
-  });
-
-  it('does not mutate original select elements', () => {
-    let options = [
-      ...document.querySelector('#multiselect').options,
-      ...document.querySelector('#singleSelect').options
-    ];
-
-    for (let $option of options) {
-      expect($option.getAttribute('selected')).toBeNull();
-    }
-  });
-
-  it('serializes inputs with already present value attributes', () => {
-    expect($('#valueAttr')[0].getAttribute('value')).toBe('Replacement Value!');
-  });
-
-  it('adds a guid data-attribute to the original DOM', () => {
-    expect(document.querySelectorAll('[data-percy-element-id]')).toHaveSize(9);
-  });
-
-  it('adds matching guids to the orignal DOM and cloned DOM', () => {
-    let og = document.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id');
-    expect(og).toEqual($('[data-percy-element-id]')[0].getAttribute('data-percy-element-id'));
-  });
-
-  it('does not override previous guids when reserializing', () => {
-    let getUid = () => document.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id');
-    let first = getUid();
-
-    serializeDOM();
-    expect(getUid()).toEqual(first);
-  });
-
-  it('does not mutate values in origial DOM', () => {
-    expect($('#name')[0].getAttribute('value')).toBe('Bob Boberson');
-    expect(document.querySelector('#name').getAttribute('value')).toBeNull();
+  platforms.forEach((platform) => {
+    let $, dom;
+    beforeEach(() => {
+      dom = cache[platform].dom;
+      $ = cache[platform].$;
+    });
+
+    it(`${platform}: serializes checked checkboxes`, () => {
+      expect($('#mailing')[0].checked).toBe(true);
+    });
+
+    it(`${platform}: leaves unchecked checkboxes alone`, () => {
+      expect($('#nevercheckedradio')[0].checked).toBe(false);
+    });
+
+    it(`${platform}: serializes checked radio buttons`, () => {
+      expect($('#radio')[0].checked).toBe(true);
+    });
+
+    it(`${platform}: serializes textareas`, () => {
+      expect($('#feedback')[0].innerText).toBe('This is my feedback... And it is not very helpful');
+    });
+
+    it(`${platform}: serializes input elements`, () => {
+      expect($('#name')[0].getAttribute('value')).toBe('Bob Boberson');
+    });
+
+    it(`${platform}: serializes single select elements`, () => {
+      expect($('#singleSelect>:nth-child(1)')[0].selected).toBe(false);
+      expect($('#singleSelect>:nth-child(2)')[0].selected).toBe(false);
+      expect($('#singleSelect>:nth-child(3)')[0].selected).toBe(true);
+    });
+
+    it(`${platform}: serializes multi-select elements`, () => {
+      expect($('#multiselect>:nth-child(1)')[0].selected).toBe(true);
+      expect($('#multiselect>:nth-child(2)')[0].selected).toBe(false);
+      expect($('#multiselect>:nth-child(3)')[0].selected).toBe(true);
+    });
+
+    it(`${platform}: does not mutate original select elements`, () => {
+      let options = [
+        ...dom.querySelector('#multiselect').options,
+        ...dom.querySelector('#singleSelect').options
+      ];
+
+      for (let $option of options) {
+        expect($option.getAttribute('selected')).toBeNull();
+      }
+    });
+
+    it(`${platform}: serializes inputs with already present value attributes`, () => {
+      expect($('#valueAttr')[0].getAttribute('value')).toBe('Replacement Value!');
+    });
+
+    it(`${platform}: adds a guid data-attribute to the original DOM`, () => {
+      // plain platform has extra element #test-shadow
+      expect(dom.querySelectorAll('[data-percy-element-id]')).toHaveSize(platform === 'plain' ? 10 : 9);
+    });
+
+    it(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => {
+      let og = dom.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id');
+      expect(og).toEqual($('[data-percy-element-id]')[0].getAttribute('data-percy-element-id'));
+    });
+
+    it(`${platform}: does not override previous guids when reserializing`, () => {
+      let getUid = () => dom.querySelector('[data-percy-element-id]').getAttribute('data-percy-element-id');
+      let first = getUid();
+
+      serializeDOM();
+      expect(getUid()).toEqual(first);
+    });
+
+    it(`${platform}: does not mutate values in origial DOM`, () => {
+      expect($('#name')[0].getAttribute('value')).toBe('Bob Boberson');
+      expect(dom.querySelector('#name').getAttribute('value')).toBeNull();
+    });
   });
 });
diff --git a/packages/dom/test/serialize-videos.test.js b/packages/dom/test/serialize-videos.test.js
index 394cfefb2..7b2314f4b 100644
--- a/packages/dom/test/serialize-videos.test.js
+++ b/packages/dom/test/serialize-videos.test.js
@@ -1,4 +1,4 @@
-import { withExample, parseDOM } from './helpers';
+import { parseDOM, withExample, platforms, platformDOM } from './helpers';
 import serializeDOM from '@percy/dom';
 
 let canPlay = $video => new Promise(resolve => {
@@ -9,54 +9,82 @@ let canPlay = $video => new Promise(resolve => {
 describe('serializeVideos', () => {
   let $, serialized;
 
-  it('serializes video elements', async () => {
-    withExample(`
-      <video src="base/test/assets/example.webm" id="video" controls />
-    `);
+  platforms.forEach((platform) => {
+    it(`${platform}: serializes video elements`, async () => {
+      withExample(`
+        <video src="base/test/assets/example.webm" id="video" controls />
+      `);
 
-    await canPlay(window.video);
-    serialized = serializeDOM();
-    $ = parseDOM(serialized.html);
-
-    expect($('#video')[0].getAttribute('poster'))
-      .toMatch('/__serialized__/\\w+\\.png');
-    expect(serialized.resources).toEqual([{
-      url: $('#video')[0].getAttribute('poster'),
-      content: jasmine.any(String),
-      mimetype: 'image/png'
-    }]);
-  });
+      await canPlay(platform === 'shadow' ? platformDOM(platform).querySelector('video') : window.video);
+      serialized = serializeDOM();
+      $ = parseDOM(serialized.html, platform);
+
+      expect($('#video')[0].getAttribute('poster'))
+        .toMatch('/__serialized__/\\w+\\.png');
+      expect(serialized.resources).toContain(jasmine.objectContaining({
+        url: $('#video')[0].getAttribute('poster'),
+        content: jasmine.any(String),
+        mimetype: 'image/png'
+      }));
+    });
 
-  it('does not serialize videos with an existing poster', async () => {
-    withExample(`
+    it(`${platform}: does not serialize videos with an existing poster`, async () => {
+      withExample(`
       <video src="base/test/assets/example.webm" id="video" poster="//:0" />
     `);
 
-    await canPlay(window.video);
-    serialized = serializeDOM();
-    $ = parseDOM(serialized.html);
+      await canPlay(platform === 'shadow' ? platformDOM(platform).querySelector('video') : window.video);
+      serialized = serializeDOM();
+      $ = parseDOM(serialized.html);
 
-    expect($('#video')[0].getAttribute('poster')).toBe('//:0');
-    expect(serialized.resources).toEqual([]);
-  });
+      expect($('#video')[0].getAttribute('poster')).toBe('//:0');
+      expect(serialized.resources).toEqual([]);
+    });
 
-  it('does not apply blank poster images', () => {
-    withExample(`
+    it(`${platform}: does not apply blank poster images`, () => {
+      withExample(`
       <video src="//:0" id="video" />
     `);
 
-    $ = parseDOM(serializeDOM());
-    expect($('#video')[0].hasAttribute('poster')).toBe(false);
-  });
+      $ = parseDOM(serializeDOM(), platform);
+      expect($('#video')[0].hasAttribute('poster')).toBe(false);
+    });
 
-  it('does not hang serialization when there is an error thrown', () => {
-    withExample(`
+    it(`${platform}: does not hang serialization when there is an error thrown`, () => {
+      withExample(`
       <video src="//:0" id="video" />
     `);
 
-    spyOn(window.HTMLCanvasElement.prototype, 'toDataURL').and.throwError(new Error('An error'));
+      spyOn(window.HTMLCanvasElement.prototype, 'toDataURL').and.throwError(new Error('An error'));
+
+      $ = parseDOM(serializeDOM());
+      expect($('#video')[0].hasAttribute('poster')).toBe(false);
+    });
+
+    it(`${platform}: serializes video elements inside nested dom`, async () => {
+      if (platform === 'plain') {
+        return;
+      }
+      withExample('<div id="video-container"/>');
+      const dom = platformDOM(platform);
+      const videoContainer = dom.querySelector('#video-container');
+      const shadowRoot = videoContainer.attachShadow({ mode: 'open' });
+      shadowRoot.innerHTML = '<video src="base/test/assets/example.webm" id="video" controls />';
+
+      await canPlay(shadowRoot.querySelector('video'));
+      serialized = serializeDOM();
+      $ = parseDOM(serialized.html, platform);
+
+      const resultRoot = $('#video-container template')[0];
+      const videoElement = resultRoot.content.querySelector('video');
 
-    $ = parseDOM(serializeDOM());
-    expect($('#video')[0].hasAttribute('poster')).toBe(false);
+      expect(videoElement.getAttribute('poster'))
+        .toMatch('/__serialized__/\\w+\\.png');
+      expect(serialized.resources).toContain(jasmine.objectContaining({
+        url: videoElement.getAttribute('poster'),
+        content: jasmine.any(String),
+        mimetype: 'image/png'
+      }));
+    });
   });
 });
diff --git a/packages/env/package.json b/packages/env/package.json
index 3904791d5..4abc8fa1d 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/env",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/logger/package.json b/packages/logger/package.json
index efeef3b8a..a53e815d2 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/logger",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/packages/sdk-utils/package.json b/packages/sdk-utils/package.json
index dbe224a84..766a9afd5 100644
--- a/packages/sdk-utils/package.json
+++ b/packages/sdk-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@percy/sdk-utils",
-  "version": "1.18.0",
+  "version": "1.19.2-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",