Regression introduced in PR #5870

[dmaevsky]

Describe the bug

Initializing a component into an unmounted div throws

Uncaught TypeError: _a.getElementById is not a function

Reproduction

https://svelte.dev/repl/2106c33509344d6784617400c312893d?version=3.40.2
Click on "Hello World" h1.

works in v3.39

The offending lines are

 const append_styles_to = get_root_for_styles(target);
    if (!((_a = append_styles_to) === null || _a === void 0 ? void 0 : _a.getElementById(style_sheet_id))) {

in svelte/internal/index.mjs (introduced in #5870)
get_root_for_styles does not return document for a detached node

Logs

Uncaught TypeError: _a.getElementById is not a function
    at append_styles (eval at handle_message (VM1892 about:srcdoc:13), <anonymous>:41:79)
    at add_css (eval at handle_message (VM1892 about:srcdoc:13), <anonymous>:366:6)
    at init (eval at handle_message (VM1892 about:srcdoc:13), <anonymous>:229:26)
    at new Dynamic (eval at handle_message (VM1892 about:srcdoc:13), <anonymous>:438:7)
    at HTMLHeadingElement.append$1 (eval at handle_message (VM1892 about:srcdoc:13), <anonymous>:467:6)
append_styles @ VM1909:41
add_css @ VM1909:366
init @ VM1909:229
Dynamic @ VM1909:438
append$1 @ VM1909:467

System Info

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 8.34 GB / 30.96 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.13 - /usr/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 90.0

Severity

blocking an upgrade

[antstanley]

I think this might be a component resolution issue when a component is loaded dynamically.

I'm getting this error in dev (but not build) after upgrading to Svelte 3.40.2 in the svelte/kit project

Error: ENOENT: no such file or directory, open '/src/components/NavBar/src/components/NavBar/NavBar.svelte'

In my project NavBar component is the first component loaded by __layout.svelte. If I remove the NavBar import, I get the error on src/routes/index.svelte, which is the root of my project, but now first component loaded after __layout.svelte

Downgrade to 3.39 and everything works.

Someone else has logged a similar issue to mine with in the Vite project, which is most likely the same thing.

I think this is only happening when components are loaded dynamically, as the example above, my example and the vite issue example all happen with dynamically loaded components

[dominikg]

@antstanley : thats a different issue, see sveltejs/kit#2001

[nokola]

Thank you for finding and posting this. I've got the same error in my project this morning and this post saved me a few hours of digging into the svelte source code.

[Conduitry]

Mounting a component at a detached DOM node should be working again in 3.40.3 - https://svelte.dev/repl/2106c33509344d6784617400c312893d?version=3.40.3