dom-elements.md

title	DOM elements
scope	module
kind	guide
category	ecosystem
aliases	dom elements html elements
entry_for	element syntax create dom

DOM elements

📚 Documentation Index

• ← Back to README
• Beginner Guide
• API Reference
• All Guides: Why Respo | Base Components | Virtual DOM | Component States

An element is defined with create-element like:

defmacro a (props & children)
  quasiquote
    create-element :a ~props ~@children

Where children comes with keys since Respo always need keys(in keyword, string, or number) to compare children:

[]
  [] 1 (span $ {})
  [] 2 (span $ {})

And an element created like:

input $ {}
  :placeholder "|Pick a name, and hit Enter"
  :on-keydown (fn (e dispatch!))
  :style $ {}
    :line-height 2
    :width "|100%"

might be rendered to an element with events bound:

<input placeholder="Pick a name, and hit Enter"
       style="line-height:2;width:100%;">

Internally an element is stored with EDN like:

{}
  :name tag-name
  :coord nil
  :attrs attrs
  :style styles
  :event event
  :children children

Some of the frequently used elements are defined in respo.core:

a body br button canvas code div footer
  h1 h2 head header html hr img input li link
  option p pre script section select span style textarea title
  ul

Some are not, but you can create them very quickly with create-element.