Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify cloneNode to handle shadow dom. #894

Closed
wants to merge 1 commit into from
Closed

Modify cloneNode to handle shadow dom. #894

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/dom/src/serialize-dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import serializeCSSOM from './serialize-cssom';
import serializeCanvas from './serialize-canvas';
import serializeVideos from './serialize-video';

import { cloneNodeAndShadow, customOuterHTML } from './wc-clone';

// Returns a copy or new doctype for a document.
function doctype(dom) {
let { name = 'html', publicId = '', systemId = '' } = dom?.doctype ?? {};
Expand Down Expand Up @@ -32,7 +34,7 @@ export function serializeDOM(options) {

prepareDOM(dom);

let clone = dom.cloneNode(true);
let clone = cloneNodeAndShadow(dom);
serializeInputs(dom, clone);
serializeFrames(dom, clone, { enableJavaScript });
serializeVideos(dom, clone);
Expand All @@ -52,7 +54,7 @@ export function serializeDOM(options) {
}
}

return doctype(dom) + doc.outerHTML;
return doctype(dom) + customOuterHTML(doc);
}

export default serializeDOM;
64 changes: 64 additions & 0 deletions packages/dom/src/wc-clone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* 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
*/
const deepClone = host => {
let cloneNode = (node, parent) => {
let walkTree = (nextn, nextp) => {
while (nextn) {
cloneNode(nextn, nextp);
nextn = nextn.nextSibling;
}
};

let clone = node.cloneNode();
parent.appendChild(clone);

if (node.shadowRoot) {
if (clone.shadowRoot) {
// it may be set up in a custom element's constructor
clone.shadowRoot.innerHTML = '';
} else {
clone.attachShadow({
mode: 'open'
});
}

for (let sheet of node.shadowRoot.adoptedStyleSheets) {
let cssText = Array.from(sheet.rules).map(rule => rule.cssText).join('\n');
let style = document.createElement('style');
style.appendChild(document.createTextNode(cssText));
clone.shadowRoot.prepend(style);
}
}

if (node.shadowRoot) {
walkTree(node.shadowRoot.firstChild, clone.shadowRoot);
}

walkTree(node.firstChild, clone);
};

let fragment = document.createDocumentFragment();
cloneNode(host, fragment);
return fragment;
};

/**
* Sets up the document clone to mirror the result of Node.cloneNode()
* using the deep clone function able of cloning shadow dom
*/
const cloneNodeAndShadow = doc => {
let clonedDocumentElementFragment = deepClone(doc.documentElement);
clonedDocumentElementFragment.head = document.createDocumentFragment();
clonedDocumentElementFragment.documentElement = clonedDocumentElementFragment.firstChild;
return clonedDocumentElementFragment;
};

const customOuterHTML = docElement => {
return `<html class="hydrated">${docElement.getInnerHTML()}</html>`;
};


export { cloneNodeAndShadow, customOuterHTML }