Custom components

If the document references custom nodes (kebab-case type), pass them via the components prop:

import { JoyDom, type JoyDomComponentProps } from "@joy-dom/react";
import type { Spec } from "@joy-dom/spec";

function ContactButton({ children, className, id }: JoyDomComponentProps) {
  return (
    <button id={id} className={className}>
      {children}
    </button>
  );
}

export function Card({ spec }: { spec: Spec }) {
  return <JoyDom spec={spec} components={{ "contact-button": ContactButton }} />;
}

A custom component receives the resolved children, className, id, and the original node. Missing a registration for a custom node throws at render time.

Styling a custom node

The renderer does not hand custom components an inline style; that prop stays undefined for custom types. Style them from the document cascade instead: give the node a className and write the rule in the spec's style, exactly as you would for a built-in. The renderer passes that className through, and the matching rule applies inside the shadow root.

{
  "type": "contact-button",
  "props": { "id": "primary", "className": ["btn"] }
}

The same holds for alt, src, and the on* event handlers — the renderer wires those on built-in nodes only. A custom component reads anything else it needs straight off node.props. See §7.1 Component props.

Where next

• Interactive widgets builds a feedback card from custom components that hold host state.
• Events and actions covers the declarative bindings built-in nodes carry.