Shadow DOM

The auto-injected styles land in document.head, which a shadow root doesn’t see. Call injectStylesInto once per shadow root, before any Sheet.Content inside it opens:

import { injectStylesInto } from 'scrollsheet';

injectStylesInto(shadowRoot);

It adopts the core stylesheet into the root via adoptedStyleSheets, so a trigger and its surrounding markup living behind shadow encapsulation get properly scoped styles instead of reaching across the boundary for document.head’s tag. On an engine with no constructable stylesheets (Safari < 16.4) it falls back to a <style> tag appended inside the root itself, still scoped, just not adopted. The <dialog> itself still portals to document.body regardless: this only scopes the trigger/surrounding markup’s stylesheet, not where the sheet renders, since a top-layer dialog is structurally a document-level thing.

injectToastStylesInto is a sibling export for the toast stylesheet, not folded into injectStylesInto: it targets separate CSS that a core-only consumer’s bundle tree-shakes away unless something actually imports it:

import { injectToastStylesInto } from 'scrollsheet';

injectToastStylesInto(shadowRoot);

Note

Both take an optional nonce, for a CSP style-src 'nonce-...' policy. It only does anything on the <style>-tag fallback path: a nonce authorizes an inline style element, not a constructed CSSStyleSheet, so the adoptedStyleSheets path has nothing for it to gate.

API referenceFull prop reference for Sheet.Root, the styling hooks on Sheet.Content, and every other named export.

Scrollable content inside a sheetMark an inner scroller with data-scrollsheet-nested-scroll so a swipe scrolls the list first and hands off to sheet travel at the edge.