diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts index e0b723d6dd80..3869994ae436 100644 --- a/src/compiler/compile/render_dom/wrappers/Head.ts +++ b/src/compiler/compile/render_dom/wrappers/Head.ts @@ -36,7 +36,7 @@ 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} = @head_selector('${this.node.id}', @_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 3cf2ca7c4849..e79018b82b0a 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -630,6 +630,25 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray; } +export function head_selector(nodeId: string, head: HTMLElement) { + const result = []; + let started = 0; + for (const node of head.childNodes) { + if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === 'HTML_TAG_END') { + started -= 1; + result.push(node); + } else if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === 'HTML_TAG_START') { + started += 1; + result.push(node); + } else if (started > 0) { + result.push(node); + } else if (node.nodeType === 1 /* element node */ && (node).getAttribute('data-svelte') === nodeId) { + result.push(node); + } + } + return result; +} + export class HtmlTag { // parent for creating node e: HTMLElement;