Emit style and script contents as raw text

[brainkim]

Browsers never decode character references inside <style> and <script>, but the HTML renderer escaped their text like any other, so served CSS and code were broken. Hydration patched the text on pages with client JavaScript, hiding the bug; static pages stayed broken. Found via bikeshaving.org's stylesheet.

renderer.render(<style>{`a > b { font-family: "Atkinson"; }`}</style>);
// before: <style>a &gt; b { font-family: &quot;Atkinson&quot;; }</style>
// after:  <style>a > b { font-family: "Atkinson"; }</style>

A closing tag sequence is neutralized, case-preservingly, with an identity escape valid in CSS, JavaScript strings, and JSON:

renderer.render(<script>{'const s = "</script>";'}</script>);
// <script>const s = "<\/script>";</script>

So JSON-LD and import maps round-trip:

renderer.render(
  <script type="application/ld+json">
    {JSON.stringify({url: "https://example.com/</script>"})}
  </script>,
);
// JSON.parse of the contents returns the original object

Escaping stays where the parser does decode entities — style/script inside inline SVG (foreign content) and <title>/<textarea> (escapable raw text):

renderer.render(<svg><style>{"a > b {}"}</style></svg>);
// <svg><style>a &gt; b {}</style></svg>

Raw and innerHTML are unchanged. Mechanically, text() keeps the raw string alongside the escaped one and arrange(), which knows the tag and scope, chooses.

Nine new tests (raw output, neutralizations, the carve-outs, a JSON-LD round-trip, a zero-warning hydration case). One docs paragraph: Raw is no longer needed for style/script, except a dynamic script body containing <!-- together with <script. CHANGELOG entry; skill references regenerated.

🤖 Generated with Claude Code

https://claude.ai/code/session_019pggktip8wsuxzy2VCY9p7