ssrElement

Renders an element from a props object: what compiled server output calls for an element with a spread (<div {...props} />), and the server half of Dynamic and element.

Renders an element from a props object: what compiled server output calls for an element with a spread (<div {...props} />), and the server half of Dynamic and element. It writes the same markup the client's spread produces.

class, className, classList and style are combined into one class and one style attribute; other keys are attributes, with React names mapped (htmlFor is for) and HTML boolean attributes (disabled, checked, ...) written as bare names. ref, children, on* keys and the on:, use: and prop: prefixes are skipped; attr: and bool: select the attribute and presence forms. innerHTML and dangerouslySetInnerHTML are written unescaped as the content. On a textarea the value (or defaultValue) is the content; on a select it marks the matching <option selected> (an array for multiple); on other elements defaultValue and defaultChecked are the value and checked attributes. Void elements (img, input, ...) get no content.

Import#

import { ssrElement } from "@shadow-js/web/server";

Signature#

function ssrElement(
  tag: string,
  props: unknown,
  children: unknown = undefined,
  needsKey = false,
  svg = false,
): SsrNode

Parameters#

Name	Description
`tag`	Element name: letters, digits and dashes, starting with a letter.
`props`	The props object (each getter is read once), or `null`.
`children`	The content, escaped unless it is an `SsrNode`. Undefined (the default) uses the `children` prop.
`needsKey`	`true` writes the hydration key of this template root first. Default: `false`.
`svg`	`true` for an SVG element: SVG presentation names are hyphenated (`strokeWidth` is `stroke-width`), other names keep their case. Default: `false`.

Returns#

The element as a trusted SsrNode.

Throws#

TypeError INVALID_TAG_NAME for an invalid tag, INVALID_ATTRIBUTE_NAME for an invalid attribute name, and the errors of ssrAttribute, ssrClass and ssrStyle for invalid values.

Examples#

import { renderToString, ssrElement } from "@shadow-js/web/server";

const props = { id: "save", disabled: true, class: ["btn", { primary: true }], children: "Save" };
const html = renderToString(() => ssrElement("button", props));
// '<button id="save" disabled class="btn primary">Save</button>'