Custom Tags

A custom tag is a function that returns a custom virtual node. Custom tags are similar to stateless components in other frameworks.

function Link(props, children) {
  return h("a", { href: props.href }, children)
}

h("main", { id: "app" }, [
  Link({ href: "#" }, "Hi.")
])

Here is the generated virtual node.

{
  tag: "main",
  data: {
    id: "app"
  },
  children: [{
    tag: "a",
    data: {
      href: "#"
    },
    children: ["Hi."]
  }]
}

JSX

Custom tags and JSX integrate well together.

<main id="app">
  <Link href="#">Hi.</Link>
</main>

If you don't know all the properties that you want to place on a custom element ahead of time, you can use the spread syntax.

const Link = (props, children) =>
  <a {...props}>{children}</a>