add support of closed shadow roots in Chrome

extension/core/content/content-bootstrap.js

@@ -232,7 +232,7 @@ this.singlefile.extension.core.content.bootstrap = this.singlefile.extension.cor
 	function serializeShadowRoots(node) {
 		const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
 		node.querySelectorAll("*").forEach(element => {
-			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			const shadowRoot = singlefile.lib.helper.getShadowRoot(element);
 			if (shadowRoot) {
 				serializeShadowRoots(shadowRoot);
 				const templateElement = document.createElement("template");

extension/ui/content/content-ui-editor-web.js

@@ -1725,7 +1725,7 @@ table {
 
 	function serializeShadowRoots(node) {
 		node.querySelectorAll("*").forEach(element => {
-			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			const shadowRoot = getShadowRoot(element);
 			if (shadowRoot) {
 				serializeShadowRoots(shadowRoot);
 				const templateElement = document.createElement("template");
@@ -1739,7 +1739,7 @@ table {
 	function deserializeShadowRoots(node) {
 		node.querySelectorAll(`template[${SHADOW_MODE_ATTRIBUTE_NAME}]`).forEach(element => {
 			if (element.parentElement) {
-				let shadowRoot = element.parentElement.openOrClosedShadowRoot || element.parentElement.shadowRoot;
+				let shadowRoot = getShadowRoot(element.parentElement);
 				if (shadowRoot) {
 					Array.from(element.childNodes).forEach(node => shadowRoot.appendChild(node));
 					element.remove();
@@ -1782,7 +1782,7 @@ table {
 			document.currentScript.remove();
 			const processNode = node => {
 				node.querySelectorAll("template[${SHADOW_MODE_ATTRIBUTE_NAME}]").forEach(element=>{
-					let shadowRoot = element.parentElement.openOrClosedShadowRoot || element.parentElement.shadowRoot;
+					let shadowRoot = getShadowRoot(element.parentElement);
 					if (!shadowRoot) {
 						shadowRoot = element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:Boolean(element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}"))});
 						shadowRoot.innerHTML = element.innerHTML;
@@ -1817,6 +1817,7 @@ table {
 			const anchorNote = ${minifyText(anchorNote.toString())};
 			const getPosition = ${minifyText(getPosition.toString())};
 			const onMouseUp = ${minifyText(onMouseUp.toString())};
+			const getShadowRoot = ${minifyText(getShadowRoot).toString()};
 			const maskNoteElement = getMaskElement(${JSON.stringify(NOTE_MASK_CLASS)});
 			const maskPageElement = getMaskElement(${JSON.stringify(PAGE_MASK_CLASS)}, ${JSON.stringify(PAGE_MASK_CONTAINER_CLASS)});
 			let selectedNote, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, collapseNoteTimeout, cuttingMode, cuttingOuterMode;
@@ -1874,4 +1875,9 @@ table {
 		return otherElement.parentElement && (element == otherElement.parentElement || isAncestor(element, otherElement.parentElement));
 	}
 
+	function getShadowRoot(element) {
+		const chrome = window.chrome;
+		return element.openOrClosedShadowRoot || (chrome && chrome.dom && chrome.dom.openOrClosedShadowRoot && chrome.dom.openOrClosedShadowRoot(element)) || element.shadowRoot;
+	}
+
 })();

lib/single-file/processors/frame-tree/content/content-frame-tree.js

@@ -377,7 +377,7 @@ this.singlefile.lib.processors.frameTree.content.frames = this.singlefile.lib.pr
 	function getFrames(document) {
 		let frames = Array.from(document.querySelectorAll(FRAMES_CSS_SELECTOR));
 		document.querySelectorAll(ALL_ELEMENTS_CSS_SELECTOR).forEach(element => {
-			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			const shadowRoot = singlefile.lib.helper.getShadowRoot(element);
 			if (shadowRoot) {
 				frames = frames.concat(...shadowRoot.querySelectorAll(FRAMES_CSS_SELECTOR));
 			}

lib/single-file/single-file-core.js

@@ -1026,7 +1026,7 @@ this.singlefile.lib.core = this.singlefile.lib.core || (() => {
 				}
 				const scriptElement = doc.createElement("script");
 				scriptElement.setAttribute(SCRIPT_TEMPLATE_SHADOW_ROOT, "");
-				scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){node.querySelectorAll("template[${SHADOW_MODE_ATTRIBUTE_NAME}]").forEach(element=>{let shadowRoot = element.parentElement.openOrClosedShadowRoot || element.parentElement.shadowRoot;if (!shadowRoot) {shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:Boolean(element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}"))});shadowRoot.innerHTML=element.innerHTML;element.remove();processNode(shadowRoot)}})}})()`;
+				scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){node.querySelectorAll("template[${SHADOW_MODE_ATTRIBUTE_NAME}]").forEach(element=>{const chrome = window.chrome;let shadowRoot = element.parentElement.openOrClosedShadowRoot || (chrome && chrome.dom && chrome.dom.openOrClosedShadowRoot && chrome.dom.openOrClosedShadowRoot(element.parentElement)) || element.parentElement.shadowRoot;if (!shadowRoot) {shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:Boolean(element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}"))});shadowRoot.innerHTML=element.innerHTML;element.remove();processNode(shadowRoot)}})}})()`;
 				doc.body.appendChild(scriptElement);
 			}
 

lib/single-file/single-file-helper.js

@@ -79,6 +79,7 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 		flatten,
 		getFontWeight,
 		normalizeFontFamily,
+		getShadowRoot,
 		ON_BEFORE_CAPTURE_EVENT_NAME,
 		ON_AFTER_CAPTURE_EVENT_NAME,
 		WIN_ID_ATTRIBUTE_NAME,
@@ -184,7 +185,7 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 				}
 			}
 			getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle);
-			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			const shadowRoot = getShadowRoot(element);
 			if (shadowRoot) {
 				const shadowRootInfo = {};
 				element.setAttribute(SHADOW_ROOT_ATTRIBUTE_NAME, data.shadowRoots.length);
@@ -326,6 +327,11 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 		}
 	}
 
+	function getShadowRoot(element) {
+		const chrome = window.chrome;
+		return element.openOrClosedShadowRoot || (chrome && chrome.dom && chrome.dom.openOrClosedShadowRoot && chrome.dom.openOrClosedShadowRoot(element)) || element.shadowRoot;
+	}
+
 	function normalizeFontFamily(fontFamilyName = "") {
 		return removeQuotes(singlefile.lib.vendor.cssUnescape.process(fontFamilyName.trim())).toLowerCase();
 	}