Interface: TrustedHtmlResult

Properties

[trustedHtmlBrand]

readonly [trustedHtmlBrand]: true

markup

readonly markup: string

Example

Carry explicit reviewed raw markup whose browser parsing requires the configured application policy:

import {
  createApp,
  html,
  hydrate,
  trustedHTML,
  type HydrationOptions,
  type TrustedHtmlResult,
  type TrustedTypePolicy,
  type TrustedTypesConfig,
} from '@gluonjs/core';

const factory = (globalThis as typeof globalThis & {
  trustedTypes: { createPolicy(name: string, rules: { createHTML(value: string): string }): TrustedTypePolicy };
}).trustedTypes;
const policy: TrustedTypePolicy = factory.createPolicy('gluon-shop', { createHTML: (value) => value });
const trustedTypes = { policyName: 'gluon-shop', policy } satisfies TrustedTypesConfig;
const reviewedMarkup: TrustedHtmlResult = trustedHTML('<strong>Reviewed application markup</strong>');
const app = createApp(() => html`<main>${reviewedMarkup}</main>`);
app.config.trustedTypes = trustedTypes;
const root = document.querySelector<HTMLElement>('#app')!;
const mount = app.mount(root);
const hydrationOptions = { expectedMarkup: root.innerHTML, trustedTypes } satisfies HydrationOptions;
hydrate(html`<main>${reviewedMarkup}</main>`, root, hydrationOptions);
mount.unmount();