ssrRawText

Writes the children of a <script> or <style> element: the helper compiled server output calls for a dynamic child of one. The browser reads these elements' content as raw text, so the value is written as it is (a > b stays a > b; HTML entities would corrupt the stylesheet or the code) with no region markers around it, and the client adopts the text when it hydrates. Only one thing is changed: a closing tag of the element, in any letter case (</style, </SCRIPT), and <!-- in a script, would end the element early or hide its end, so each is rewritten (<\/style, <\u0021--) to text that CSS, JavaScript and JSON read as the same characters.

Accessors are called untracked, arrays are flattened, null, undefined and booleans write nothing, and a symbol throws, as in escape.

Import#

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

Signature#

function ssrRawText(tag: "script" | "style", value: unknown): SsrNode

Parameters#

Returns#

The text as a trusted SsrNode.

Throws#

• TypeError INVALID_RAW_TEXT_TAG when tag is not script or style, and the errors of escape for the value.

Examples#

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

const css = "a > b { color: red } </style><script>alert(1)</script>";
const html = renderToString(() => ssr(["<style>", "</style>"], ssrRawText("style", css)));
// "<style>a > b { color: red } <\/style><script>alert(1)</script></style>"