MyST and Shadow DOM

Three ways into an article that isolates its widgets

Curvenote and MyST sites such as Elemental Microscopy render each widget inside a shadow root. Since release 2026-09-19 the viewer element mounts there directly. This page runs all three routes on the same data so you can pick one and copy it. Data: Barkley RJR (2026), doi:10.5281/zenodo.18776682, CC BY 4.0.

1. The any:bundle widget

One directive in your MyST file. Every key becomes an attribute of the viewer element.

:::{any:bundle} https://find-nuclei.github.io/embed/v1/widget.mjs
{
  "url": "https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr",
  "channels": "0:on:FFFFFF:0:240",
  "x": 2115, "y": 1688, "zoom": -1.9,
  "height": "560"
}
:::

Rendered above by calling the widget module the way anywidget does: a shadow root, then render({ model, el }).

2. The element inside a shadow root

What the widget does under the hood. If your platform gives you a shadow root and a script tag, this is all it takes.

<script src="https://find-nuclei.github.io/embed/v1/viewer.js"></script>
<find-nuclei-viewer
  url="https://nyu1.osn.mghpcc.org/barkley-replication/nuclei_mosaic.zarr"
  channels="0:on:FFFFFF:0:240"
  x="2115" y="1688" zoom="-1.9"
  invert background="white"
  height="560"
></find-nuclei-viewer>

This one also shows the new invert attribute on a white background. grayscale is its sibling.

3. An iframe

For a platform that allows neither scripts nor widgets, but does allow iframes. MyST has an iframe directive for exactly this.

:::{iframe} https://find-nuclei.github.io/publications/barkley-2026.html
:width: 100%
:::