# Page Object Root

Any page object that is unique inside the current browser view can be used as a root. A root page object can be loaded directly inside the browser.

## Root Properties

The root of a page object can contain these properties:

- `elements` (Optional) Array. A nested tree of element objects. An element object can be one of these types:
  - [Basic element](/docs/platform/utam/references/utam-grammar/page-object-elements.md#basic-elements)—A UI element required for user interaction or to scope another element.
  - [Custom element](/docs/platform/utam/references/utam-grammar/page-object-elements.md#custom-elements)—A nested page object.
  - [Container element](/docs/platform/utam/references/utam-grammar/page-object-elements.md#container-elements)—A `slot` or `div` into which other components are injected.
- `methods` (Optional) Array. Each object declares a public method. The only supported method type is `compose`. A [compose method](/docs/platform/utam/references/utam-grammar/methods.md) combines several element actions, like clearing a text field (`clear`) and entering a value (`setText`).
- `root` (Optional) Boolean. To load a page object from a test, set `root` to `true` and add a `selector` element that points to its most outer (root) element. If a component can be loaded only inside its immediate parent (for example, a navigation item can be loaded only inside a navigation bar), don’t mark it as `root`.
- `selector` (Optional) Object. If `root` is `true`, add a `selector` that points to its most outer (root) element. The root selector must match the HTML tag name. See [selector](/docs/platform/utam/references/utam-grammar/element-selectors.md).
- `shadow` (Optional) Object. A shadow boundary at the root of the page object. Contains only an `elements` property, which is a nested tree of objects. A page object can have `elements` scoped both inside and outside its shadow root.
- `exposeRootElement` (Optional) Boolean. See [Actionable Root](#actionable-root-element).
- `type` (Optional) String. See [Actionable Root](#actionable-root-element).
- `description` (Optional) String or Object. See [Page Object Description](/docs/platform/utam/references/utam-grammar/descriptions-metadata.md#page-object-description).
- `metadata` (Optional) Object. See [Page Object Metadata](/docs/platform/utam/references/utam-grammar/descriptions-metadata.md#page-object-metadata).
- `platform` (Optional) String. See [Platform Context](/docs/platform/utam/references/utam-grammar/platform-context.md).
- `beforeLoad` (Optional) Array. See [beforeLoad](/docs/platform/utam/references/utam-grammar/beforeload.md).

Here's a sample outline of a page object.

```json
{
  "elements": [],
  "methods": [],
  "shadow": {
    "elements": []
  },
  "root": true,
  "selector": {
    "css": "one-record-home"
  }
}
```

## Actionable Root Element

To make the root element actionable, expose it via a public method. Add these properties to the root element:

- `exposeRootElement` Boolean. If set to `true`, UTAM creates a public method that returns an instance of the element with the given type. The name of the getter is `getRoot`.
- `type` (Optional) See [basic element types](/docs/platform/utam/references/utam-grammar/page-object-elements.md#basic-elements).

```json
{
  "exposeRootElement": true,
  "type": ["editable"],
  "elements": [],
  "methods": []
}
```

The UTAM generator converts this JSON into a public method. The method returns an instance of the page object root element for the test to interact with.

```js
async getRoot() {
    const driver = this.driver;
    const root = await this.getRootElement();
    return new _EditableUtamElement(driver, root);
}
```

:::note
The word `root` is reserved and can't be used as an element name.
:::