Environment

A provider that allows components to access window and document objects in different environments like iframes or Shadow DOM.

Usage

A utility component that provides the current environment's window, document, and rootNode to all child components. This is essential for components that rely on DOM APIs to function correctly when rendered inside an iframe, Shadow DOM, or other isolated environments.

import { Environment } from "@elemnts-ui/react"

<Environment>
  {/* Components here will use the provided environment */}
  <YourComponent />
</Environment>

Context

Ark UI components use the useEnvironment hook to access the correct document and window objects. By default, they use the global document and window.

Shadow DOM

When using Shadow DOM, you should provide the rootNode to ensure that components like Popover or Dialog can correctly calculate positions and manage focus within the shadow root.

const shadowRoot = myRef.current.shadowRoot

<Environment value={{ rootNode: shadowRoot }}>
  <Popover.Root>
    {/* ... */}
  </Popover.Root>
</Environment>

API Reference

The component accepts all props from the Ark UI Environment Provider.

Prop	Type	Default
value	`EnvironmentContext`	-