use shadowmode attribute name to detect templates to inject into shadow roots

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

@@ -330,7 +330,8 @@ this.singlefile.lib.core = this.singlefile.lib.core || (() => {
 	const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 	const SCRIPT_TAG_FOUND = /<script/gi;
 	const NOSCRIPT_TAG_FOUND = /<noscript/gi;
-	const WC_ATTRIBUTE_NAME = "data-single-file-web-component";
+	const SHADOW_MODE_ATTRIBUTE_NAME = "shadowmode";
+	const SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME = "delegatesfocus";
 
 	class Processor {
 		constructor(options, batchRequest) {
@@ -828,7 +829,7 @@ this.singlefile.lib.core = this.singlefile.lib.core || (() => {
 					}
 					const stylesheetInfo = { mediaText };
 					this.stylesheets.set(element, stylesheetInfo);
-					if (element.closest("[" + WC_ATTRIBUTE_NAME + "]")) {
+					if (element.closest("[" + SHADOW_MODE_ATTRIBUTE_NAME + "]")) {
 						stylesheetInfo.scoped = true;
 					}
 					const options = { maxResourceSize: this.options.maxResourceSize, maxResourceSizeEnabled: this.options.maxResourceSizeEnabled, url: this.options.url, charset: this.charset, compressCSS: this.options.compressCSS };
@@ -910,7 +911,7 @@ this.singlefile.lib.core = this.singlefile.lib.core || (() => {
 			if (this.options.shadowRoots && this.options.shadowRoots.length) {
 				processElement(this.doc);
 				const scriptElement = doc.createElement("script");
-				scriptElement.textContent = `(()=>{document.currentScript.remove();processNode(document);function processNode(node){debugger;node.querySelectorAll("template[${WC_ATTRIBUTE_NAME}]").forEach(element=>{const shadowRoot=element.parentElement.attachShadow({mode:"open"});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=>{if (!element.parentElement.shadowRoot) {const shadowRoot=element.parentElement.attachShadow({mode:element.getAttribute("${SHADOW_MODE_ATTRIBUTE_NAME}"),delegatesFocus:element.getAttribute("${SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME}") == "true"});shadowRoot.innerHTML=element.innerHTML;element.remove();processNode(shadowRoot)}})}})()`;
 				doc.body.appendChild(scriptElement);
 			}
 
@@ -922,7 +923,8 @@ this.singlefile.lib.core = this.singlefile.lib.core || (() => {
 						const shadowRootData = options.shadowRoots[Number(attributeValue)];
 						if (shadowRootData) {
 							const templateElement = doc.createElement("template");
-							templateElement.setAttribute(WC_ATTRIBUTE_NAME, "");
+							templateElement.setAttribute(SHADOW_MODE_ATTRIBUTE_NAME, shadowRootData.mode);
+							templateElement.setAttribute(SHADOW_DELEGATE_FOCUS_ATTRIBUTE_NAME, Boolean(shadowRootData.delegatesFocus));
 							const shadowDoc = util.parseDocContent(shadowRootData.content);
 							if (shadowDoc.head) {
 								const metaCharset = shadowDoc.head.querySelector("meta[charset]");