✨ Shadow DOM serialisation support

packages/dom/src/prepare-dom.js

@@ -13,9 +13,7 @@ export function markElement(domElement, disableShadowDOM) {
 
   // add special marker for shadow host
   if (!disableShadowDOM && domElement.shadowRoot) {
-    if (!domElement.getAttribute('data-percy-shadow-host')) {
-      domElement.setAttribute('data-percy-shadow-host', '');
-    }
+    domElement.setAttribute('data-percy-shadow-host', '');
 
     if (!domElement.getAttribute('data-percy-element-id')) {
       domElement.setAttribute('data-percy-element-id', uid());

packages/dom/src/serialize-canvas.js

@@ -42,20 +42,6 @@ export function serializeCanvas({ dom, clone, resources }) {
     }
     cloneEl.remove();
   }
-
-  // find canvas inside shadow host and recursively serialize them.
-  for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-    let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-
-    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-      serializeCanvas({
-        dom: shadowHost.shadowRoot,
-        clone: cloneShadowHost.shadowRoot,
-        resources
-      });
-    }
-  }
 }
 
 export default serializeCanvas;

packages/dom/src/serialize-cssom.js

@@ -19,7 +19,7 @@ function styleSheetsMatch(sheetA, sheetB) {
 }
 
 // Outputs in-memory CSSOM into their respective DOM nodes.
-export function serializeCSSOM({ dom, clone, warnings, resources }, adoptedStylesMap = null) {
+export function serializeCSSOM({ dom, clone, warnings, resources, cache }) {
   for (let styleSheet of dom.styleSheets) {
     if (isCSSOM(styleSheet)) {
       let styleId = styleSheet.ownerNode.getAttribute('data-percy-element-id');
@@ -45,22 +45,18 @@ export function serializeCSSOM({ dom, clone, warnings, resources }, adoptedStyle
 
   // clone stylesheets in shadowRoot
   // https://github.com/WICG/construct-stylesheets/issues/93
-  if (!adoptedStylesMap) {
-    adoptedStylesMap = new Map();
-  }
-
   for (let sheet of dom.adoptedStyleSheets) {
     const styleLink = document.createElement('link');
     styleLink.setAttribute('rel', 'stylesheet');
 
-    if (!adoptedStylesMap.has(sheet)) {
+    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);
-      adoptedStylesMap.set(sheet, resource.url);
+      cache.set(sheet, resource.url);
     }
-    styleLink.setAttribute('data-percy-serialized-attribute-href', adoptedStylesMap.get(sheet));
+    styleLink.setAttribute('data-percy-serialized-attribute-href', cache.get(sheet));
 
     if (clone.constructor.name === 'HTMLDocument') {
       // handle document and iframe
@@ -69,20 +65,6 @@ export function serializeCSSOM({ dom, clone, warnings, resources }, adoptedStyle
       clone.prepend(styleLink);
     }
   }
-
-  // find stylesheets inside shadow host and recursively serialize them.
-  for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-    let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-
-    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-      serializeCSSOM({
-        dom: shadowHost.shadowRoot,
-        clone: cloneShadowHost.shadowRoot,
-        resources
-      }, adoptedStylesMap);
-    }
-  }
 }
 
 export default serializeCSSOM;

packages/dom/src/serialize-dom.js

@@ -31,6 +31,17 @@ function serializeHTML(ctx) {
   return doctype(ctx.dom) + html;
 }
 
+function serializeElements(ctx) {
+  serializeInputs(ctx);
+  serializeFrames(ctx);
+  serializeVideos(ctx);
+
+  if (!ctx.enableJavaScript) {
+    serializeCSSOM(ctx);
+    serializeCanvas(ctx);
+  }
+}
+
 // Serializes a document and returns the resulting DOM string.
 export function serializeDOM(options) {
   let {
@@ -46,20 +57,28 @@ export function serializeDOM(options) {
   let ctx = {
     resources: new Set(),
     warnings: new Set(),
+    cache: new Map(),
     enableJavaScript,
     disableShadowDOM
   };
 
   ctx.dom = dom;
   ctx.clone = cloneNodeAndShadow(ctx);
 
-  serializeInputs(ctx);
-  serializeFrames(ctx);
-  serializeVideos(ctx);
+  serializeElements(ctx);
 
-  if (!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('element with data-percy-shadow-host does not have shadowRoot');
+    }
   }
 
   if (domTransformation) {

packages/dom/src/serialize-frames.js

@@ -54,22 +54,6 @@ export function serializeFrames({ dom, clone, warnings, resources, enableJavaScr
       cloneEl.remove();
     }
   }
-
-  // find iframes inside shadow host and recursively serialize them.
-  for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-    let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-
-    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-      serializeFrames({
-        dom: shadowHost.shadowRoot,
-        clone: cloneShadowHost.shadowRoot,
-        warnings,
-        resources,
-        enableJavaScript
-      });
-    }
-  }
 }
 
 export default serializeFrames;

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}"]`);
@@ -28,19 +28,6 @@ export function serializeInputElements({ dom, clone }) {
         cloneEl.setAttribute('value', elem.value);
     }
   }
-
-  // find inputs inside shadow host and recursively serialize them.
-  for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-    let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-
-    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-      serializeInputElements({
-        dom: shadowHost.shadowRoot,
-        clone: cloneShadowHost.shadowRoot
-      });
-    }
-  }
 }
 
 export default serializeInputElements;

packages/dom/src/serialize-video.js

@@ -26,21 +26,6 @@ export function serializeVideos({ dom, clone, resources, warnings }) {
     // use a data attribute to avoid making a real request
     cloneEl.setAttribute('data-percy-serialized-attribute-poster', resource.url);
   }
-
-  // find video inside shadow host and recursively serialize them.
-  for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-    let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-    let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-
-    if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-      serializeVideos({
-        dom: shadowHost.shadowRoot,
-        clone: cloneShadowHost.shadowRoot,
-        resources,
-        warnings
-      });
-    }
-  }
 }
 
 export default serializeVideos;