# XWUIComposer

Mounts a declarative tree of XWUI components, so a page is data rather than markup: each node names an xwui-* component, its data and config, the child nodes that go into its own fields (items, children, body, header), DOM events and a ref that receives the live instance.

Only `xwui-*` custom elements compose; any other tag is refused and reported through the `rejected` event. A slot given as an array becomes an array of elements, a single node becomes one element, and a string passes through. Tags that load lazily are filled in once they are defined. The composer adds no box of its own (`display: contents`).

## BasicUsage

A stack of a heading and a button, composed from data.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: BasicUsage
description: A stack of a heading and a button, composed from data.
```

## CardBody

A card whose body is another XWUI component.

```example
file: examples/CardBody.ts
html: examples/CardBody.html
title: CardBody
description: A card whose body is another XWUI component.
```

## One element from a node

`XWUIComposer.element(node)` builds a single XWUI element from a node, for a place that takes an element instead of a tree, such as an XWUITable cell renderer. Slots and `on` handlers work; `ref` and `key` need a mounted composer.

```ts
render: (_, row) => XWUIComposer.element({ tag: 'xwui-status-glyph', data: { tone: 'success', label: row.state } })
```

```api
```