make compatible with the Declarative Shadow DOM spec.

src/extension/core/content/content-bootstrap.js

@@ -250,13 +250,13 @@ function detectSavedPage(document) {
 }
 
 function serializeShadowRoots(node) {
-	const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
+	const SHADOWROOT_ATTRIBUTE_NAME = "shadowroot";
 	node.querySelectorAll("*").forEach(element => {
 		const shadowRoot = singlefile.helper.getShadowRoot(element);
 		if (shadowRoot) {
 			serializeShadowRoots(shadowRoot);
 			const templateElement = document.createElement("template");
-			templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, "open");
+			templateElement.setAttribute(SHADOWROOT_ATTRIBUTE_NAME, "open");
 			templateElement.appendChild(shadowRoot);
 			element.appendChild(templateElement);
 		}

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

@@ -6,13 +6,12 @@
 	processNode(document);
 
 	function processNode(node) {
-		node.querySelectorAll("template[shadowmode]").forEach(element => {
+		node.querySelectorAll("template[shadowroot]").forEach(element => {
 			let shadowRoot = element.parentElement.shadowRoot;
 			if (!shadowRoot) {
 				try {
 					shadowRoot = element.parentElement.attachShadow({
-						mode: element.getAttribute("shadowmode"),
-						delegatesFocus: Boolean(element.getAttribute("delegatesfocus"))
+						mode: element.getAttribute("shadowroot")
 					});
 					shadowRoot.innerHTML = element.innerHTML;
 					element.remove();

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

@@ -30,8 +30,7 @@
 	const FORBIDDEN_TAG_NAMES = ["a", "area", "audio", "base", "br", "col", "command", "embed", "hr", "img", "iframe", "input", "keygen", "link", "meta", "param", "source", "track", "video", "wbr"];
 	const BUTTON_ANCHOR_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtaIVETuIOASsThZERRylikWwUNoKrTqYXPohNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0DhFqJqWbbOKBqlpGMRcVMdkUMvKIbfQCG0SExU4+nFtLwHF/38PH1LsKzvM/9OXqUnMkAn0g8y3TDIl4nnt60dM77xCFWlBTic+Ixgy5I/Mh12eU3zgWHBZ4ZMtLJOeIQsVhoYbmFWdFQiaeIw4qqUb6QcVnhvMVZLVVY4578hcGctpziOs0hxLCIOBIQIaOCDZRgIUKrRoqJJO1HPfyDjj9BLplcG2DkmEcZKiTHD/4Hv7s185MTblIwCrS/2PbHCBDYBepV2/4+tu36CeB/Bq60pr9cA2Y+Sa82tfAR0LsNXFw3NXkPuNwBBp50yZAcyU9TyOeB9zP6pizQfwt0rbq9NfZx+gCkqaulG+DgEBgtUPaax7s7W3v790yjvx825XKP2aKCdAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QLEQA4M3Y7LzIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAACVBMVEUAAAAAAACKioqjwG1pAAAAAXRSTlMAQObYZgAAAAFiS0dEAmYLfGQAAABkSURBVBjThc47CsNADIThWfD0bnSfbdIroP/+V0mhsN5gTNToK0YPaSvnF9B9wGykG54j/2GF1/hauE4E1AOuNxrBdA5KUXIqdiCnqC1zIZ2mFJQzKJ3wesOhcwDM4+fo7cOuD9C4HTQ9HAAQAAAAAElFTkSuQmCC";
 	const BUTTON_CLOSE_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtaIVETuIOASsThZERRylikWwUNoKrTqYXPohNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEydFJ0UVK/F9SaBHjwXE/3t173L0DhFqJqWbbOKBqlpGMRcVMdkUMvKIbfQCG0SExU4+nFtLwHF/38PH1LsKzvM/9OXqUnMkAn0g8y3TDIl4nnt60dM77xCFWlBTic+Ixgy5I/Mh12eU3zgWHBZ4ZMtLJOeIQsVhoYbmFWdFQiaeIw4qqUb6QcVnhvMVZLVVY4578hcGctpziOs0hxLCIOBIQIaOCDZRgIUKrRoqJJO1HPfyDjj9BLplcG2DkmEcZKiTHD/4Hv7s185MTblIwCrS/2PbHCBDYBepV2/4+tu36CeB/Bq60pr9cA2Y+Sa82tfAR0LsNXFw3NXkPuNwBBp50yZAcyU9TyOeB9zP6pizQfwt0rbq9NfZx+gCkqaulG+DgEBgtUPaax7s7W3v790yjvx825XKP2aKCdAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+QLEQA6Na1u6IUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAACVBMVEUAAAAAAACKioqjwG1pAAAAAXRSTlMAQObYZgAAAAFiS0dEAmYLfGQAAABlSURBVBhXTc/BEUQhCAPQ58ES6McSPED/rfwDI7vOMCoJIeGd6CvFgZXiwk47Ia5VUKdrVXcb39kfqxqmTg+I2xJ2tqhVTaGaQjTl7/GgIc/4CL4Vs3RsjLFndcxPnAn4iww8A3yQjRZjti1t6AAAAABJRU5ErkJggg==";
-	const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
-	const SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME = "delegatesfocus";
+	const SHADOWROOT_ATTRIBUTE_NAME = "shadowroot";
 	const SCRIPT_TEMPLATE_SHADOW_ROOT = "data-template-shadow-root";
 	const NOTE_TAGNAME = "single-file-note";
 	const NOTE_CLASS = "note";
@@ -1767,7 +1766,7 @@ table {
 		});
 		doc.querySelectorAll("." + MASK_CLASS + ", ." + REMOVED_CONTENT_CLASS).forEach(maskElement => maskElement.remove());
 		doc.querySelectorAll("." + HIGHLIGHT_CLASS).forEach(noteElement => noteElement.classList.remove(HIGHLIGHT_HIDDEN_CLASS));
-		doc.querySelectorAll(`template[${SHADOW_MODE_ATTRIBUTE_NAME}]`).forEach(templateElement => {
+		doc.querySelectorAll(`template[${SHADOWROOT_ATTRIBUTE_NAME}]`).forEach(templateElement => {
 			const noteElement = templateElement.querySelector("." + NOTE_CLASS);
 			if (noteElement) {
 				noteElement.classList.remove(NOTE_HIDDEN_CLASS);
@@ -1845,7 +1844,7 @@ table {
 			if (shadowRoot) {
 				serializeShadowRoots(shadowRoot);
 				const templateElement = document.createElement("template");
-				templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, "open");
+				templateElement.setAttribute(SHADOWROOT_ATTRIBUTE_NAME, "open");
 				templateElement.appendChild(shadowRoot);
 				element.appendChild(templateElement);
 			}
@@ -1853,7 +1852,7 @@ table {
 	}
 
 	function deserializeShadowRoots(node) {
-		node.querySelectorAll(`template[${SHADOW_MODE_ATTRIBUTE_NAME}]`).forEach(element => {
+		node.querySelectorAll(`template[${SHADOWROOT_ATTRIBUTE_NAME}]`).forEach(element => {
 			if (element.parentElement) {
 				let shadowRoot = getShadowRoot(element.parentElement);
 				if (shadowRoot) {
@@ -1903,11 +1902,11 @@ table {
 		return minifyText(`(() => {
 			document.currentScript.remove();
 			const processNode = node => {
-				node.querySelectorAll("template[${SHADOW_MODE_ATTRIBUTE_NAME}]").forEach(element=>{
+				node.querySelectorAll("template[${SHADOWROOT_ATTRIBUTE_NAME}]").forEach(element=>{
 					let shadowRoot = getShadowRoot(element.parentElement);
 					if (!shadowRoot) {
 						try {
-							shadowRoot = element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:Boolean(element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}"))});
+							shadowRoot = element.parentElement.attachShadow({mode:element.getAttribute("${SHADOWROOT_ATTRIBUTE_NAME}")});
 							shadowRoot.innerHTML = element.innerHTML;
 							element.remove();
 						} catch (error) {}						

src/single-file/single-file-core.js

@@ -401,8 +401,7 @@ const PREFIX_DATA_URI_IMAGE_SVG = "data:image/svg+xml";
 const SCRIPT_TAG_FOUND = /<script/gi;
 const NOSCRIPT_TAG_FOUND = /<noscript/gi;
 const CANVAS_TAG_FOUND = /<canvas/gi;
-const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
-const SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME = "delegatesfocus";
+const SHADOWROOT_ATTRIBUTE_NAME = "shadowroot";
 const SCRIPT_TEMPLATE_SHADOW_ROOT = "data-template-shadow-root";
 const UTF8_CHARSET = "utf-8";
 
@@ -1028,7 +1027,7 @@ class Processor {
 				mediaText = element.media.toLowerCase();
 			}
 			const stylesheetInfo = { mediaText };
-			if (element.closest("[" + SHADOW_MODE_ATTRIBUTE_NAME + "]")) {
+			if (element.closest("[" + SHADOWROOT_ATTRIBUTE_NAME + "]")) {
 				stylesheetInfo.scoped = true;
 			}
 			if (element.tagName == "LINK" && element.charset) {
@@ -1148,7 +1147,7 @@ class Processor {
 			}
 			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.shadowRoot;if (!shadowRoot) {try {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()} catch (error) {} if (shadowRoot) {processNode(shadowRoot)}}})}})()`;
+			scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){node.querySelectorAll("template[${SHADOWROOT_ATTRIBUTE_NAME}]").forEach(element=>{let shadowRoot = element.parentElement.shadowRoot;if (!shadowRoot) {try {shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOWROOT_ATTRIBUTE_NAME}")});shadowRoot.innerHTML=element.innerHTML;element.remove()} catch (error) {} if (shadowRoot) {processNode(shadowRoot)}}})}})()`;
 			doc.body.appendChild(scriptElement);
 		}
 
@@ -1160,10 +1159,7 @@ class Processor {
 					const shadowRootData = options.shadowRoots[Number(attributeValue)];
 					if (shadowRootData) {
 						const templateElement = doc.createElement("template");
-						templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, shadowRootData.mode);
-						if (shadowRootData.delegatesFocus) {
-							templateElement.setAttribute(SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME, "");
-						}
+						templateElement.setAttribute(SHADOWROOT_ATTRIBUTE_NAME, shadowRootData.mode);
 						if (shadowRootData.adoptedStyleSheets) {
 							shadowRootData.adoptedStyleSheets.forEach(stylesheetContent => {
 								const styleElement = doc.createElement("style");

src/single-file/single-file-helper.js

@@ -224,7 +224,6 @@ function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map
 			data.shadowRoots.push(shadowRootInfo);
 			getElementsInfo(win, doc, shadowRoot, options, data, elementHidden);
 			shadowRootInfo.content = shadowRoot.innerHTML;
-			shadowRootInfo.delegatesFocus = shadowRoot.delegatesFocus;
 			shadowRootInfo.mode = shadowRoot.mode;
 			try {
 				if (shadowRoot.adoptedStyleSheets && shadowRoot.adoptedStyleSheets.length) {