add support of shadow dom

extension/ui/bg/ui-editor.js

@@ -21,7 +21,7 @@
  *   Source.
  */
 
-/* global browser, singlefile, window, document, prompt, matchMedia */
+/* global browser, singlefile, window, document, prompt, matchMedia, fetch */
 
 singlefile.extension.ui.bg.editor = (() => {
 
@@ -251,7 +251,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	let updatedResources = {};
 
 	window.onresize = viewportSizeChange;
-	window.onmessage = event => {
+	window.onmessage = async event => {
 		const message = JSON.parse(event.data);
 		if (message.method == "setMetadata") {
 			document.title = "[SingleFile] " + message.title;
@@ -266,6 +266,8 @@ singlefile.extension.ui.bg.editor = (() => {
 			}
 		}
 		if (message.method == "setContent") {
+			const initScriptContent = await (await fetch("../content/content-ui-editor-init-web.js")).text();
+			message.content = message.content.replace(/<script data-template-shadow-root.*<\/script>/g, `<script data-template-shadow-root>${initScriptContent.replace(/"/g, "&quot;")}</script>`);
 			const pageData = {
 				content: message.content,
 				filename: tabData.filename
@@ -328,6 +330,7 @@ singlefile.extension.ui.bg.editor = (() => {
 					tabData = JSON.parse(tabDataContents.join(""));
 					tabData.docSaved = true;
 					tabDataContents = [];
+					tabData.content = tabData.content.replace(/<script data-template-shadow-root.*<\/script>/g, `<script data-template-shadow-root src=${"../content/content-ui-editor-init-web.js"}></script>`);
 					editorElement.contentWindow.postMessage(JSON.stringify({ method: "init", content: tabData.content }), "*");
 					editorElement.contentWindow.focus();
 					delete tabData.content;

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

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

manifest.json

@@ -147,6 +147,7 @@
 		"common/ui/content/content-infobar-web.js",
 		"extension/lib/readability/Readability.js",
 		"extension/lib/readability/Readability-readerable.js",
+		"extension/ui/content/content-ui-editor-init-web.js",
 		"extension/ui/content/content-ui-editor-web.js",
 		"extension/ui/pages/editor-note-web.css",
 		"extension/ui/pages/editor-mask-web.css",