# Embed (/docs/components/renderings/embed)

> One rendered section inside another site's page, isolated in a declarative shadow root, with no script.

Embed one section in another site's page through a declarative shadow root. Its styles stay inside, the host's stay out, and no script runs.

## What it renders

The section the steps below embed, a `command-row`, rendered alone as this site draws every preview:

Preview: every frame of command-row is listed in https://next.mdxui.dev/components/manifest.json

## Prerequisites

- The [quickstart](https://next.mdxui.dev/docs/start/quickstart) runs in your project, with `@mdxui/themes` installed as on [Packages and versions](https://next.mdxui.dev/docs/start/packages).
- A host page that loads the Theme's typefaces, since a shadow root inherits fonts from its host.

## Steps

1. Render the section under a Theme:

   ```ts
   const block = BlockSchema.parse({ type: 'command-row', command: 'npm i @example/harbor-tides', note: 'Node.js 22 or later' });
   const { theme, css } = THEMES.quaypoint;
   const html = renderBlock(block, context(theme, 'paper', theme.icons));
   ```

2. Wrap it in a shadow root with the Theme's tokens and the Section type CSS. The tokens move from `:root` to `:host`:

   ```ts
   // A declarative shadow root: the section's styles stay inside it, and the host's stay out. No script.
   const embed = `<div class="mdxui-embed">
     <template shadowrootmode="open">
       <style>${css().replaceAll(':root', ':host')}${baseCss}${primitivesCss}${blocksCss}</style>
       ${html}
     </template>
   </div>`;
   ```

3. Write `embed` into the host page's HTML, where the browser attaches the shadow root as it parses.

## Result

`embed.html`: a host paragraph, then the `command-row` in `quaypoint`, styled by its own sheet and untouched by the host's.

A React page that is prerendered, as a Fumadocs page is, writes the same string into its HTML. A page rendered in the browser attaches a shadow root with `attachShadow` and sets its `innerHTML` instead. This site's previews take a third path: each is a frame, an `iframe` of one prerendered section.

## Related

  - [HTML](https://next.mdxui.dev/docs/components/renderings/html): The four steps `renderBlock` is one of.
  - [The Theme contract](https://next.mdxui.dev/docs/themes/contract): The tokens the shadow root carries.
  - [command-row](https://next.mdxui.dev/docs/sections/command-row): The section this example embeds.