From e6aaa7963d1efc95573620c3857f13857f846a75 Mon Sep 17 00:00:00 2001
From: Isaak Eriksson <isaak.eriksson@protonmail.com>
Date: Thu, 2 Dec 2021 01:41:36 +0100
Subject: [PATCH] [fix] add logic to select and claim raw html tags in head
 (#6463)

---
 .../compile/render_dom/wrappers/Head.ts       |  6 +++++-
 src/runtime/internal/dom.ts                   | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
index e0b723d6dd80..63c8c43ce680 100644
--- a/src/compiler/compile/render_dom/wrappers/Head.ts
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -36,7 +36,11 @@ export default class HeadWrapper extends Wrapper {
 		let nodes;
 		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
 			nodes = block.get_unique_name('head_nodes');
-			block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`);
+			block.chunks.claim.push(b`
+				const ${nodes} = [
+					...@query_selector_all('[data-svelte="${this.node.id}"]', @_document.head),
+					...@get_hydratable_elements(@_document.head)
+				];`);
 		}
 
 		this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes);
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index eb3389e3f863..197b1481fae5 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -640,6 +640,27 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum
 	return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray;
 }
 
+export function get_hydratable_elements(parent: HTMLElement = document.body) {
+	const elements = Array.from(parent.childNodes);
+	let cursor = 0;
+	while (cursor < elements.length) {
+		const start_index = find_comment(elements, 'HTML_TAG_START', cursor);
+		const end_index = find_comment(elements, 'HTML_TAG_END', start_index);
+		if (start_index === end_index) {
+			elements.splice(cursor, elements.length - cursor);
+			break;
+		}
+
+		detach(elements[start_index]);
+		detach(elements[end_index]);
+
+		elements.splice(cursor, 1 + start_index - cursor);
+		cursor += end_index - start_index - 1;
+	}
+	console.log(elements);
+	return elements;
+}
+
 export class HtmlTag {
 	// parent for creating node
 	e: HTMLElement;