add support of Element#openOrClosedShadowRoot (fixes #518)

extension/core/content/content-bootstrap.js

@@ -227,11 +227,12 @@ this.singlefile.extension.core.content.bootstrap = this.singlefile.extension.cor
 	function serializeShadowRoots(node) {
 		const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
 		node.querySelectorAll("*").forEach(element => {
-			if (element.shadowRoot) {
-				serializeShadowRoots(element.shadowRoot);
+			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			if (shadowRoot) {
+				serializeShadowRoots(shadowRoot);
 				const templateElement = document.createElement("template");
 				templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, "open");
-				templateElement.appendChild(element.shadowRoot);
+				templateElement.appendChild(shadowRoot);
 				element.appendChild(templateElement);
 			}
 		});

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

@@ -1631,11 +1631,12 @@ table {
 
 	function serializeShadowRoots(node) {
 		node.querySelectorAll("*").forEach(element => {
-			if (element.shadowRoot) {
-				serializeShadowRoots(element.shadowRoot);
+			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			if (shadowRoot) {
+				serializeShadowRoots(shadowRoot);
 				const templateElement = document.createElement("template");
 				templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, "open");
-				templateElement.appendChild(element.shadowRoot);
+				templateElement.appendChild(shadowRoot);
 				element.appendChild(templateElement);
 			}
 		});
@@ -1644,7 +1645,7 @@ table {
 	function deserializeShadowRoots(node) {
 		node.querySelectorAll(`template[${SHADOW_MODE_ATTRIBUTE_NAME}]`).forEach(element => {
 			if (element.parentElement) {
-				let shadowRoot = element.parentElement.shadowRoot;
+				let shadowRoot = element.parentElement.openOrClosedShadowRoot || element.parentElement.shadowRoot;
 				if (shadowRoot) {
 					Array.from(element.childNodes).forEach(node => shadowRoot.appendChild(node));
 					element.remove();
@@ -1687,8 +1688,9 @@ table {
 			document.currentScript.remove();
 			const processNode = node => {
 				node.querySelectorAll("template[${SHADOW_MODE_ATTRIBUTE_NAME}]").forEach(element=>{
-					if (!element.parentElement.shadowRoot) {
-						const shadowRoot = element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:Boolean(element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}"))});
+					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);

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

@@ -361,8 +361,9 @@ 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 => {
-			if (element.shadowRoot) {
-				frames = frames.concat(...element.shadowRoot.querySelectorAll(FRAMES_CSS_SELECTOR));
+			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			if (shadowRoot) {
+				frames = frames.concat(...shadowRoot.querySelectorAll(FRAMES_CSS_SELECTOR));
 			}
 		});
 		return frames;

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

@@ -1018,7 +1018,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=>{if (!element.parentElement.shadowRoot) {const 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=>{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)}})}})()`;
 				doc.body.appendChild(scriptElement);
 			}
 

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

@@ -184,17 +184,18 @@ this.singlefile.lib.helper = this.singlefile.lib.helper || (() => {
 				}
 			}
 			getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle);
-			if (element.shadowRoot) {
+			const shadowRoot = element.openOrClosedShadowRoot || element.shadowRoot;
+			if (shadowRoot) {
 				const shadowRootInfo = {};
 				element.setAttribute(SHADOW_ROOT_ATTRIBUTE_NAME, data.shadowRoots.length);
 				data.markedElements.push(element);
 				data.shadowRoots.push(shadowRootInfo);
-				getElementsInfo(win, doc, element.shadowRoot, options, data, elementHidden);
-				shadowRootInfo.content = element.shadowRoot.innerHTML;
-				shadowRootInfo.delegatesFocus = element.shadowRoot.delegatesFocus;
-				shadowRootInfo.mode = element.shadowRoot.mode;
-				if (element.shadowRoot.adoptedStyleSheets && element.shadowRoot.adoptedStyleSheets.length) {
-					shadowRootInfo.adoptedStyleSheets = Array.from(element.shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
+				getElementsInfo(win, doc, shadowRoot, options, data, elementHidden);
+				shadowRootInfo.content = shadowRoot.innerHTML;
+				shadowRootInfo.delegatesFocus = shadowRoot.delegatesFocus;
+				shadowRootInfo.mode = shadowRoot.mode;
+				if (shadowRoot.adoptedStyleSheets && shadowRoot.adoptedStyleSheets.length) {
+					shadowRootInfo.adoptedStyleSheets = Array.from(shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
 				}
 			}
 			getElementsInfo(win, doc, element, options, data, elementHidden);