render
Renders anything into Element. It creates a tracking scope using a root and returns a dispose function that when called will unmount the contents.
When calling render in a tracked scope, it will be disposed automatically if the scope gets disposed.
Rendering in a container won't clear the container. Disposing what has been rendered won't remove unrelated elements from the container.
# Arguments
| name | type | description |
|---|---|---|
| children | any | thing to render |
| parent? | Element [document.body] | target node where to render |
| options? | {clear:false, relative:false} | clear controls if the target node should be cleared before inserting. relative to insertBefore the parent instead |
Return Value: Dispose function
# Snippet
# Important!
If you are passing to render a function, do not run the function before passing it to render, else the function will run outside the root tracking scope.
| render(App()) | wrong! |
| render(App) | recommended |
| render(<App/>) | ok |
| render(() => App) | ok |
| render(() => App()) | ok |
| render(() => <App/>) | ok |
| render( <div/>) | ok |
| render(<><div/><div/></>) | ok |
# App
Render a component to the body (default Element)
# Dispose
Dispose what has been rendered. Calling dispose won't clear unrelated Elements from the same container
# Multi
Render some elements into the body, then render some other components into these elements
# Types
The render function can render pretty much anything
# Clear
Clear the target container before mounting
# Custom Element
Custom Element Tracking Test