@percy/dom 1.22.0-alpha.0 → 1.23.0

package/README.md

@@ -37,7 +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
-- `disableShadowDOMSerialization` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
+- `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
 
 ## Serialized Content
 

package/dist/bundle.js

@@ -60,7 +60,7 @@
         warnings,
         resources,
         enableJavaScript,
-        disableShadowDOMSerialization
+        disableShadowDOM
       } = _ref;
       for (let frame of dom.querySelectorAll('iframe')) {
         var _clone$head;
@@ -86,7 +86,7 @@
             domTransformation: setBaseURI,
             dom: frame.contentDocument,
             enableJavaScript,
-            disableShadowDOMSerialization
+            disableShadowDOM
           });
 
           // append serialized warnings and resources
@@ -159,7 +159,7 @@
     function uid() {
       return `_${Math.random().toString(36).substr(2, 9)}`;
     }
-    function markElement(domElement, disableShadowDOMSerialization) {
+    function markElement(domElement, disableShadowDOM) {
       var _domElement$tagName;
       // Mark elements that are to be serialized later with a data attribute.
       if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
@@ -169,7 +169,7 @@
       }
 
       // add special marker for shadow host
-      if (!disableShadowDOMSerialization && domElement.shadowRoot) {
+      if (!disableShadowDOM && domElement.shadowRoot) {
         domElement.setAttribute('data-percy-shadow-host', '');
         if (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
@@ -341,7 +341,7 @@
     function cloneNodeAndShadow(_ref) {
       let {
         dom,
-        disableShadowDOMSerialization
+        disableShadowDOM
       } = _ref;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -353,12 +353,17 @@
         };
 
         // mark the node before cloning
-        markElement(node, disableShadowDOMSerialization);
+        markElement(node, disableShadowDOM);
         let clone = node.cloneNode();
         parent.appendChild(clone);
 
+        // shallow clone should not contain children
+        if (clone.children) {
+          Array.from(clone.children).forEach(child => clone.removeChild(child));
+        }
+
         // clone shadow DOM
-        if (node.shadowRoot && !disableShadowDOMSerialization) {
+        if (node.shadowRoot && !disableShadowDOM) {
           // create shadowRoot
           if (clone.shadowRoot) {
             // it may be set up in a custom element's constructor
@@ -386,16 +391,14 @@
     /**
      * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
      */
-    function getOuterHTML(ctx) {
-      const docElement = ctx.clone.documentElement;
+    function 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: !ctx.disableShadowDOMSerialization
+        includeShadowRoots: true
       });
       docElement.textContent = '';
       return docElement.outerHTML.replace('</html>', `${innerHTML}</html>`);
@@ -451,7 +454,7 @@
 
     // Serializes and returns the cloned DOM as an HTML string
     function serializeHTML(ctx) {
-      let html = getOuterHTML(ctx);
+      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
@@ -488,7 +491,7 @@
         enableJavaScript = options === null || options === void 0 ? void 0 : options.enable_javascript,
         domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
         stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
-        disableShadowDOMSerialization = options === null || options === void 0 ? void 0 : options.disable_shadow_dom_serialization
+        disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom
       } = options || {};
 
       // keep certain records throughout serialization
@@ -497,7 +500,7 @@
         warnings: new Set(),
         cache: new Map(),
         enableJavaScript,
-        disableShadowDOMSerialization
+        disableShadowDOM
       };
       ctx.dom = dom;
       ctx.clone = cloneNodeAndShadow(ctx);
@@ -513,7 +516,7 @@
           console.error(errorMessage);
         }
       }
-      if (!disableShadowDOMSerialization) {
+      if (!disableShadowDOM) {
         injectDeclarativeShadowDOMPolyfill(ctx);
       }
       let result = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.22.0-alpha.0",
+  "version": "1.23.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "5928e586c401ac10840d1ec6219875526e45d100"
+  "gitHead": "cd9a0de3f51233e414cd2657997ce02e8faa19e2"
 }