# DomRenderTemplate

A Layer that provides the `RenderTemplate` service implemented for DOM rendering.

This layer enables templates to be rendered as actual DOM nodes. It handles:
- Parsing templates into DOM fragments.
- Caching parsed templates.
- Hydrating from existing DOM (if applicable).
- Setting up event listeners.
- Managing fine-grained updates to DOM nodes via `Fx` streams.

## Signatures

```ts
export declare const DomRenderTemplate: Layer.Layer<RenderTemplate, never, never> & {
    readonly using: (document: Document) => Layer.Layer<RenderTemplate, never, never>;
};
```

## Why

The Layer is the DOM implementation of the same `RenderTemplate` service used
by SSR. It compiles a literal once, clones namespace-correct fragments, and
connects each captured part directly to its producer—there is no virtual DOM
or component-specific event state. Delegated handlers receive EventSource's
documented native-event Proxy so `currentTarget` can identify their target.

## Ownership and lifetime

Template and fragment caches live with the Layer service. Each emitted DOM
range keeps its mounted subscriptions, delegated native listeners, queued
callbacks, and ref finalizers in the surrounding event Scope. Replaceable
spread parts use child Scopes so replacement still releases their resources.
Only nodes and attributes represented by that range are changed; external
classes and unowned siblings remain intact.

## Cost model and moves

Captured scalar text, attribute, property, boolean, comment, and ref parts
update their retained target in O(1) with respect to the surrounding tree.
Structural changes diff only the local dynamic range. Moving an already
connected node prefers `ParentNode.moveBefore` and falls back to
`insertBefore`, preserving DOM identity and browser state.

## Web standards

HTML, SVG, MathML, and foreign-content namespace boundaries are compiled with
native DOM APIs. Dialog, popover, anchor positioning, custom elements, and
browser event behavior remains available through EventSource's forwarding
Proxy because the renderer does not replace the platform event model.

## Examples

```ts
import { Effect, Layer } from "effect"
import { html } from "@typed/template"
import { DomRenderTemplate, render } from "@typed/template/Render"
import { Fx } from "@typed/fx"

const program = Effect.gen(function* () {
  const template = html`<div>Hello, world!</div>`

  return yield* render(template, document.body).pipe(
    Fx.drainLayer,
    Layer.provide(DomRenderTemplate),
    Layer.launch
  )
})
```