```
## Mounting the app
`h()` returns a real `Element`, so use standard DOM APIs:
```typescript
import { div, p, button } from "@takanashi/rikka-dom";
import { signal } from "@takanashi/rikka-signal";
const count = signal(0);
const app = div(
{},
p({}, "Count: ", count),
button({ onclick: () => count.set(count.get() + 1) }, "+"),
);
document.body.appendChild(app);
```
`rikka-dom` also exports `applyChild` for cases where you need to apply a child without `appendChild` (e.g. tests):
```typescript
import { applyChild } from "@takanashi/rikka-dom";
const container = document.getElementById("app");
if (container) applyChild(container, app);
```
## Children
The `Child` type accepts: `null | string | number | boolean | Element | DocumentFragment | ReactiveRange | Signal.State
| Signal.Computed | Child[] | Signal.State | Signal.Computed | (() => Child)`.
Booleans (`true`/`false`) render nothing — useful for `&&` conditional patterns like `div({}, show && p({}, "visible"))`.
The interesting case is the function — it's auto-wrapped as `computed` so any `.get()` inside is tracked. See [../signal-binding/#function-children](../signal-binding/SKILL.md#function-children) for details.
```typescript
const count = signal(0);
// Function child — equivalent to computed(() => `count=${count.get()}`)
div({}, () => `count=${count.get()}`);
// Function returning null clears the content
const visible = signal(true);
div({}, () => (visible.get() ? span({}, "on") : null));
```
## Namespace handling
rikka-dom auto-selects the namespace based on tag name:
- HTML tags → `http://www.w3.org/1999/xhtml`
- SVG-only tags (`circle`, `path`, `g`, …) → `http://www.w3.org/2000/svg`
- MathML-only tags → `http://www.w3.org/1998/Math/MathML`
- Name-collision tags (`a`, `script`, `style`, `title`, `text`, `span`, `textPath`) → use the `svg` prefix in SVG context: `svga`, `svgscript`, `svgstyle`, `svgtitle`, `svgtext`, `svgspan`, `svgtextPath`
See [../svg/](../svg/).
## Pitfalls
### 1. `h\`\`` returns an array
```typescript
// ❌ TypeError: argument is not a Node
document.body.appendChild(h`Hello
`);
// ✅ Take [0]
document.body.appendChild(h`Hello
`[0]);
```
### 2. `NumberAttr` default is `NaN` (not `0`)
`Number(undefined)` returns `NaN`. If you want a default, declare it:
```typescript
defineElement("my-el", {
attributes: { count: { ...NumberAttr, default: 0 } },
});
```
Or use a custom `toProp`:
```typescript
attributes: {
count: { toProp: (v) => (v !== undefined ? Number(v) : 0) },
}
```
### 3. Never use `innerHTML`
It bypasses the signal system, has XSS risk, and prevents binding:
```typescript
// ❌ No reactivity, XSS-prone
el.innerHTML = `${title}
`;
// ✅
el.replaceChildren(div({}, title));
```
### 4. Plain function as a value (not a child) is NOT reactive
Function *children* are auto-wrapped as `computed`, but function *values* (e.g. as an attribute, or in `inlineStyle` arg) are not:
```typescript
// ✅ Function child — auto-wrapped
div({}, () => `count=${count.get()}`);
// ❌ Plain function in inlineStyle — NOT reactive
div({ style: { color: () => count.get() % 2 ? "red" : "blue" } });
// ✅ Use computed() for value-position reactivity
div({ style: { color: computed(() => count.get() % 2 ? "red" : "blue") } });
```
See [../signal-binding/#function-values-vs-computed](../signal-binding/SKILL.md#function-values-vs-computed).
## See also
- [../signal-binding/](../signal-binding/) — putting signals into the DOM
- [../control-flow/](../control-flow/) — `For`, `Show`, `When`, `Switch`
- [../form-binding/](../form-binding/) — two-way binding inputs
- [../svg/](../svg/) — SVG markup
- [../common-pitfalls/](../common-pitfalls/)