Is getElementById("app") Magic?
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!Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
9 Replies
hmm it mounts fine for me?
._.
Oh I just hit refresh in the terminal and it worked
I had tried that several times and nothing had happened
strange
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 itAh - is there a way to force it in the sandbox or no?
Wdym by force it?
to load the initial html
The playground includes the
<div id="app"> as part of its initial HTML, so the JS is able to locate it and render
ah ok, probably misunderstood
Playground doesn't let you specify your own, but you're free to add additional elements via JS