# Environment

URL: https://ark-ui.com/docs/utilities/environment
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/utilities/environment.mdx

Set up components for custom environments like iframes, Shadow DOM, or Electron.

---

## Motivation

We use [Zag.js](https://zagjs.com/overview/composition#custom-window-environment) internally, which relies on DOM query
methods like `document.querySelectorAll` and `document.getElementById`. In custom environments like iframes, Shadow DOM,
or Electron, these methods might not work as expected.

To handle this, Ark UI includes the `EnvironmentProvider`, allowing you to set the appropriate root node or document,
ensuring correct DOM queries.

## Setup

To support custom environments like an iframe, Shadow DOM or Electron, render the `EnvironmentProvider` component to
provide the environment context to all Ark UI components.

<ExampleCode id="setup" component="environment" />

### Usage in iframe and shadow dom

The `EnvironmentProvider` component will automatically detect the current environment and set the correct environment
context. 

## Context

Use the `useEnvironmentContext` hook to access the `RootNode`, `Document`, and `Window`.

<ExampleCode id="usage" component="environment" />

## API Reference

**Component API Reference**

**EnvironmentProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `RootNode | (() => RootNode)` | No |  |