Is getElementById("app") Magic?

[brazen heart]

I've gotten through most of the tutorials, but one thing that is bothering me is the render mount with document.getElementById("app"). None of the top-level components set their id to "app", but they're successfully mounted anyway.

I figured I'd try testing my assumptions and knowledge by making a simple table using a store and setting a cell to a black block on mouse click. However, I can't seem get my component to mount in the playground here: https://playground.solidjs.com/anonymous/d9c86a2c-af76-4ab4-a397-94bc212c2370

I can see there is a div element with an id of "app", but nothing is rendered inside. I thought the button would be rendered at the very least if the iteration over the store array is failing. Could anyone explain the assumption that I'm probably misunderstanding? It would be much appreciated!

[junior temple]

hmm it mounts fine for me?

[brazen heart]

._.

Oh I just hit refresh in the terminal and it worked

I had tried that several times and nothing had happened

strange

[junior temple]

When using render(), Solid expects the DOM to already have a container element created - usually this is a <div id="app"> that is part of the initial html of the page. Since your Solid code won't run until the initial HTML has loaded, the getElementById("app") is able to find that div and render all your elements inside it

[brazen heart]

Ah - is there a way to force it in the sandbox or no?

[junior temple]

Wdym by force it?

[brazen heart]

to load the initial html

[junior temple]

The playground includes the <div id="app"> as part of its initial HTML, so the JS is able to locate it and render

[brazen heart]

ah ok, probably misunderstood