Skip to content
This repository has been archived by the owner on Jan 10, 2024. It is now read-only.

Modify cloneNode to handle shadow dom. #1

Merged
merged 2 commits into from
Apr 25, 2022
+72 −2
Merged

Modify cloneNode to handle shadow dom. #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88c5eaf
Modify cloneNode to handle shadow dom.
aschenoni Apr 18, 2022
7575b93
Clean up custom shadow serializing functions.
aschenoni Apr 20, 2022
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 => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how do we know this (not-trivial) walker works ?
do we need any tests ? or is this code copy-pasted from somewhere ?

Copy link

@mmun mmun Apr 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's copied from https://stackoverflow.com/a/55540552 and modified a bit. I don't think this fork is really set up to run tests.

I'd like to see the code tidied up and tested but yeah...

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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code is pretty hacky. We should rewrite the logic here to avoid adding properties onto a fragment which don't exist.

return clonedDocumentElementFragment;
};

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

@mmun mmun Apr 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The general approach would be to copy the attributes on the root element over instead of hard coding class="hydrated" (which a Stencil-specific thing)

};


export { cloneNodeAndShadow, customOuterHTML }