handle invalid child tags (e.g. on YT)

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

@@ -137,7 +137,7 @@ async function autoSavePage() {
 			if (framesSessionId) {
 				singlefile.processors.frameTree.cleanup(framesSessionId);
 			}
-			helper.postProcessDoc(document, docData.markedElements);
+			helper.postProcessDoc(document, docData.markedElements, docData.invalidElements);
 			if (options.userScriptEnabled && waitForUserScript) {
 				await waitForUserScript(helper.ON_AFTER_CAPTURE_EVENT_NAME);
 			}

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

@@ -383,7 +383,7 @@ function sendMessage(targetWindow, message, useChannel) {
 function getFrameData(document, globalThis, windowId, options) {
 	const docData = helper.preProcessDoc(document, globalThis, options);
 	const content = helper.serialize(document);
-	helper.postProcessDoc(document, docData.markedElements);
+	helper.postProcessDoc(document, docData.markedElements, docData.invalidElements);
 	const baseURI = document.baseURI.split("#")[0];
 	return {
 		windowId,

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

@@ -181,6 +181,7 @@ class Runner {
 			this.options.imports = docData.imports;
 			this.options.referrer = docData.referrer;
 			this.markedElements = docData.markedElements;
+			this.invalidElements = docData.invalidElements;
 		}
 		if (this.options.saveRawPage) {
 			this.options.removeFrames = true;
@@ -200,7 +201,7 @@ class Runner {
 		await this.executeStage(RESOLVE_URLS_STAGE);
 		this.pendingPromises = this.executeStage(REPLACE_DATA_STAGE);
 		if (this.root && this.options.doc) {
-			util.postProcessDoc(this.options.doc, this.markedElements);
+			util.postProcessDoc(this.options.doc, this.markedElements, this.invalidElements);
 		}
 	}
 
@@ -777,7 +778,6 @@ class Processor {
 
 	removeDiscardedResources() {
 		this.doc.querySelectorAll("." + util.SINGLE_FILE_UI_ELEMENT_CLASS).forEach(element => element.remove());
-		this.doc.querySelectorAll("button button").forEach(element => element.remove());
 		this.doc.querySelectorAll("meta[http-equiv=refresh], meta[disabled-http-equiv], meta[http-equiv=\"content-security-policy\"]").forEach(element => element.remove());
 		const objectElements = this.doc.querySelectorAll("applet, object[data]:not([type=\"image/svg+xml\"]):not([type=\"image/svg-xml\"]):not([type=\"text/html\"]), embed[src]:not([src*=\".svg\"]):not([src*=\".pdf\"])");
 		this.stats.set("discarded", "objects", objectElements.length);

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

@@ -133,8 +133,14 @@ function preProcessDoc(doc, win, options) {
 			flowElements.forEach(flowElement => element.appendChild(flowElement));
 		}
 	});
+	const invalidElements = new Map();
 	let elementsInfo;
 	if (win && doc.documentElement) {
+		doc.querySelectorAll("button button").forEach(element => {
+			const placeHolderElement = doc.createComment("");
+			invalidElements.set(element, placeHolderElement);
+			element.replaceWith(placeHolderElement);
+		});
 		elementsInfo = getElementsInfo(win, doc, doc.documentElement, options);
 		if (options.moveStylesInHead) {
 			doc.querySelectorAll("body style, body ~ style").forEach(element => {
@@ -168,7 +174,8 @@ function preProcessDoc(doc, win, options) {
 		shadowRoots: elementsInfo.shadowRoots,
 		imports: elementsInfo.imports,
 		referrer: doc.referrer,
-		markedElements: elementsInfo.markedElements
+		markedElements: elementsInfo.markedElements,
+		invalidElements
 	};
 }
 
@@ -388,7 +395,7 @@ function testHiddenElement(element, computedStyle) {
 	return Boolean(hidden);
 }
 
-function postProcessDoc(doc, markedElements) {
+function postProcessDoc(doc, markedElements, invalidElements) {
 	doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
 		element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
 		element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
@@ -421,6 +428,9 @@ function postProcessDoc(doc, markedElements) {
 		element.removeAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME);
 		element.removeAttribute(STYLE_ATTRIBUTE_NAME);
 	});
+	if (invalidElements) {
+		Array.from(invalidElements.entries()).forEach(([element, placeholderElement]) => placeholderElement.replaceWith(element));
+	}
 }
 
 function getStylesheetsData(doc) {

src/single-file/single-file-util.js

@@ -157,8 +157,8 @@ function getInstance(utilOptions) {
 		preProcessDoc(doc, win, options) {
 			return helper.preProcessDoc(doc, win, options);
 		},
-		postProcessDoc(doc, markedElements) {
-			helper.postProcessDoc(doc, markedElements);
+		postProcessDoc(doc, markedElements, invalidElements) {
+			helper.postProcessDoc(doc, markedElements, invalidElements);
 		},
 		serialize(doc, compressHTML) {
 			return modules.serializer.process(doc, compressHTML);