@gluonjs/ssr / packages/ssr/src / renderShadowStyleLinks

Function: renderShadowStyleLinks()

renderShadowStyleLinks(styles): string

Renders the compact DSD transport nodes for immutable external Shadow DOM styles.

Parameters

styles

readonly ShadowStyleAsset[] | undefined

Returns

string

Example

Emit compact, digest-labelled external stylesheet links inside Declarative Shadow DOM roots instead of duplicating generated CSS:

import { css } from '@gluonjs/core';
import {
  createStyleManifest,
  renderResourceHints,
  renderShadowStyleLinks,
  renderStyleCarriers,
  serializeSsrState,
  type AssetManifest,
  type StyleManifest,
  type StyleManifestEntry,
  type ShadowStyleAsset,
} from '@gluonjs/ssr';

const assets = {
  entry: '/assets/client.js',
  imports: ['/assets/vendor.js'],
  styles: ['/assets/app.css'],
  assets: ['/assets/orbit-lamp.webp'],
  shadowStyles: [{ id: 'tailwind', href: '/assets/tailwind.css', digest: '4a1f9d2b' }],
} satisfies AssetManifest;
const shadow: ShadowStyleAsset = assets.shadowStyles[0]!;
const sheet = css`:host { display: block; }`;
const styles: StyleManifest = createStyleManifest([sheet]);
const first: StyleManifestEntry | undefined = styles.entries[0];
const head = renderResourceHints(assets) + renderStyleCarriers(styles, { nonce: 'request-nonce' }) + renderShadowStyleLinks([shadow]);
const state = serializeSsrState({ product: 'Orbit <Lamp>', quantity: 1 });
console.log(first?.digest, head, state);