A record containing all of the data needed to construct an HTML node (via VirtualDom.Node). This is an alias for Dom.Element in danielnarey/elm-semantic-dom.

By using a record to temporarily store data about a node, we can partially construct that node with some data, but delay building it until all of the data has been assembled. In this way, all of a node's data is available to be modified until it is either placed in a container element or passed as an argument to the Ui.render function.

Construct an element with no children

Ui.leaf "hr"
  |> Ui.render


--> <hr />

Construct an element with a text node as its only child

"Time to make the donuts!"
  |> Ui.textWrapper "p"
  |> Ui.render


--> <p>Time to make the donuts!</p>

Construct an element with some children

[ "Time to make the donuts!"
  |> Ui.textWrapper "p"
]
  |> Ui.container "div"
  |> Ui.render


--> <div>
--    <p>Time to make the donuts!</p>
--  </div>

Set the id field on a Ui.Element record, the value of which will be assigned to the element's id attribute upon rendering

myMenu
  |> Ui.setId "sidebar-menu"

Render an element record to HTML (via the native JavaScript implementation backing elm-lang/virtual-dom).

Note that you only need to call this function once — rendering the root node of a tree renders all of its children.