# `TryOnOptions.overlayRoot`

> Contract 2.0.0 · package sha256 `a857eca95b35921109faf997094bb4192f12527d9d0fcd4be7e97f06425bad6e` · generated from `configurator-runtime.d.ts` by `services/onsite-scripter/scripts/build-contract-docs.mjs`; edit the source, not this file.

Property of [`TryOnOptions`](TryOnOptions.md) · labs, `@experimental` · since 2.0.0

```ts
overlayRoot?: HTMLElement;
```

Your element for try-on's screens, as [`ActivateAROptions.overlayRoot`](ActivateAROptions.overlayRoot.md) is AR's: a positioned
element the size of the try-on view; the camera picture and Holostep's screens are drawn in
it and leave it when try-on closes. 1.6 named it `root`, which 2.0 refuses as
'unknown-field' with `didYouMean` naming this.

**Default:** undefined (a layer over the whole page, which makes the page under it inert while it shows, removed when try-on closes)

## Example

Imports: values (`has`, `validate`, the `Holo*Error` classes, the pure helpers) from `@holostep-configurators/runtime-client`, types from `@holostep-configurators/runtime-client/contract`, `/math` and `/testing` names from those entries; `boot` from the runtime module the root's `loadRuntimeAtFloor` resolves to. A type your page defines is your app's: declare it there, never import it from the package.

Compiled under the contract's strict settings (`examples/declaration/16-TryOnOptions.overlayRoot.ts`):

```ts
import type { Session } from '@holostep-configurators/runtime-client/contract';
declare const session: Session;
declare const signal: AbortSignal;
declare const view: HTMLElement;
// In the Try-on button's click handler (the shopper's gesture):
if (session.canTryOn?.().available) await session.tryOn?.({ overlayRoot: view });
```

## Generic-API test (spec 3.1)

| Rule | Result |
| --- | --- |
| 1. Neutral name | pass: `overlayRoot` names no product |
| 2. A precedent | not recorded: no ledger row (coverage.json) names this member or its owner |
| 3. Two apps, or labs | labs (`@experimental` at a stable path, reached through `has()` or `supports()`): it graduates when a second app uses it |
| 4. The cheaper fix first | not recorded per member (Appendix B decides it per need) |