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;