---
schema_version: "1"
id: ba491e957a27d6df47237601fef58eaaa739b9a2f6e48a394a8ff65d1141556e
title: Override generated content
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lwc/utam/guide/generator-override-content.md
canonical_url: https://developer.salesforce.com/docs/platform/utam/guide/generator-override-content.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 864c0e0a8e9d0ec98b1bc768753f273c64ae2bd6466da540bd9a619f9726bdcf
products:
  - UI Test Automation Model
  - lwc
---
# Override generated content

Add a generator rule file (name matches the pattern in the`rulesFileMask` option) next to an HTML or JavaScript source file to modify the generated content.

```txt
<inputRootDir>
├── generator.config.json
├── src/
   └── modules/
      ├── my-component/
         └── my-component.html
         └── my-component.rules.json
```

Generation parameters from the component-level rules override the rules defined at the project level. In addition to [Runner parameters](https://developer.salesforce.com/docs/platform/utam/guide/generator-get-started.md#generation-runner-parameters) and [HTML interpretation parameters](/tools/generator-guide), you can customize generated content by adding elements of UTAM page object grammar directly to the configuration file. In our example, the configuration file is `my-component.rules.json`.

**note:** The supported parameters were updated in version 2.1.0. Please do not use earlier versions.

## Root selector

By default, the generator adds a root selector if the [object is recognized as a root](https://developer.salesforce.com/docs/platform/utam/guide/generator-rules.md#marking-page-object-as-a-root). Otherwise, you can add a selector to a rules file following the [selector UTAM grammar](/grammar/element-selectors).

Example of configuring root selector in `my-component.rules.json`:

```json
{
  "selector": {
    "css": "my-root"
  }
}
```

If a root selector was generated and you want to remove it, set `"root": false` in `my-component.rules.json`.

## Description and metadata

By default, the generator adds a root description in this format:

```json
{
  "description": {
    "author": "UTAM generator",
    "text": ["Page Object: <name of file>", "<root if present>"]
  }
}
```

You can add both the description and the metadata to a rules file. For the syntax, see the [description and metadata UTAM grammar](/docs/platform/utam/references/utam-grammar/descriptions-metadata.html).

Example of configuring description and metadata in `my-component.rules.json`:

```json
{
  "description": "very useful page object",
  "metadata": {
    "some": "value"
  }
}
```

## Root properties

You can add more root properties to the generation rules by using UTAM JSON grammar.

- [exposeRootElement](/docs/platform/utam/references/utam-grammar/root-elements.html#actionable-root-element)
- [type](/docs/platform/utam/references/utam-grammar/page-object-elements.html)
- [beforeLoad](/docs/platform/utam/references/utam-grammar/explicit-waits.html#beforeload)
- [platform](/docs/platform/utam/references/utam-grammar/platform-context.html)
- [implements](/docs/platform/utam/references/utam-grammar/interfaces.html#interface-implementation)

Example of configuring root properties in `my-component.rules.json`:

```json
{
    "beforeLoad": [ ... ],
    "implements": "some/other/type",
    "type": "actionable",
    "exposeRootElement": true,
    "platform": "Web"
}
```

## shadowRoot

The generator determines if the source HTML has a shadowRoot based on the following rules.

A `<template>` HTML element or custom HTML element (with a dash in the tag name) is considered a shadow boundary if they are not marked as `lwc:render-mode="light"`. For example for following HTML snippets:

```html
<template>
  <div class="wrapper">
    <!-- content -->
  </div>
</template>
```

```html
<div>
  <my-generated-component>
    <button id="number"></button>
  </my-generated-component>
</div>
```

The generator produces a shadow boundary:

```json
"shadow": {
     "elements": [
        { }
    ]
}
```

Let's use the following HTML as a source for generation:

```html
<template>
  <button>button</button>
</template>
```

By default, the generated code is:

```json
{
  "shadow": {
    "elements": [
      {
        "public": true,
        "name": "button",
        "type": ["actionable", "clickable"],
        "selector": { "css": "button" }
      }
    ]
  }
}
```

To move all generated elements outside shadowRoot, set `"shadowRoot": false` in the configuration file. The generated code is:

```json
{
    "elements": [
        {
            "public": true,
            "name": "button",
            ...
        }
    ]
}
```

To move elements inside shadowRoot, set `"shadowRoot": true`.

## Add generated elements

If the generator didn't pick up some of the elements, it's possible to add them using `"elements": []` or `"shadow: { "elements" : []}` syntax from [UTAM grammar](/docs/platform/utam/references/utam-grammar/page-object-elements.html).

For example, if the originally generated `my-component.utam.json` is:

```json
{
    "elements" : [
        {
            "name" : "generated",
            "public": true,
            "selector" : { ... }
        }
    ]
}
```

Add a `configured` element in the `my-component.rules.json` rules file.

```json
{
    "shadow": {
        "elements": [
            {
                "name": "configured",
                "selector": {...}
            }
        ]
    }
}
```

The generated `my-component.utam.json` is now:

```json
{
    "elements" : [
        {
            "name" : "generated",
            "public": true,
            "selector" : { ... }
        }
    ],
    "shadow": {
        "elements": [
            {
                "name": "configured",
                "selector": {...}
            }
        ]
    }
}
```

Note that configured elements are added to existing ones, they don’t replace them. To replace the generated version, check out [remove generated element](#remove-generated-elements).

## Change generated elements

Generated elements are based on generation rules that aren’t always optimal or aware of the business function.
Sometimes, it makes sense to change generated element properties using the `replaceElements` configuration parameter. The format of `replaceElements` is an array where each element points to the generated name of the generated element and defines a subset of properties to change consistent with the element grammar format:

- `name` is a generated element whose properties should be changed
- 'element' compose changes to be applied to the element with the give name
  - [selector](/docs/platform/utam/references/utam-grammar/element-selectors.html) changes the auto-generated selector
  - [type](/docs/platform/utam/references/utam-grammar/page-object-elements.html) changes the type of the generated element
  - `nullable` defines whether the element is [nullable](https://developer.salesforce.com/docs/platform/utam/guide/nullable-vs-ispresent.md)
  - `description` adds documentation to the element getter
  - `public` defines if the element should have a public getter
  - [filter](/docs/platform/utam/references/utam-grammar/element-filters.html) sets an element's filter
  - `shadow` nested shadow elements
  - `elements` nested elements

For example, if the originally generated `my-component.utam.json` is:

```json
{
  "elements": [
    {
      "name": "div",
      "selector": { "css": ".generatedCss" }
    }
  ]
}
```

Use `replaceElements` in a `my-component.rules.json` rules file.

```json
{
    "replaceElements": {
        [
            "name" : "div",
            "element": {
                "name": "updatedName",
                "selector" : { "css": ".configuredCss" },
                "public" : true,
                "nullable": true,
                "description": "element description",
                "filter": { ... },
                "shadow": { ... },
                "elements": [
                    //nested elements
                ]
            }
        ]
    }
}
```

The generated `my-component.utam.json` is now:

```json
{
    "elements" : [
        {
            "name": "updatedName",
            "selector" : { "css": ".configuredCss" },
            "public" : true,
            "nullable": true,
            "description": "element description",
            "filter": { ... },
            "shadow": { ... },
            "elements": [
                    //nested elements
            ]
        }
    ]
}
```

## Remove generated elements

Redundant elements can be removed using `replaceElements` parameter from the [previous section](#change-generated-elements).
To remove a generated element, set a rule that sets value for the generated element with the given name as `undefined`.

For example, if the originally generated `my-component.utam.json` is:

```json
{
  "elements": [
    {
      "name": "div",
      "selector": { "css": ".generatedCss" }
    }
  ]
}
```

Given generation rules `my-component.rules.json`:

```json
{
  "replaceElements": [
    {
      "name": "div"
      // do not set "element"
    }
  ]
}
```

The generated `my-component.utam.json` is now empty because the rules defined that an element with the name `div` should be removed:

```json
{}
```

## Add compose methods

To add compose methods to the generated JSON file, add `methods` to the generation rules. These methods follow the same syntax as a regular [compose method in UTAM grammar](/grammar/methods).

### `methods`

- Type: [compose method](/docs/platform/utam/references/utam-grammar/methods.html)
- Default: undefined

Here's an example of rules:

```json
{
  "methods": [
    {
      "name": "getRootText",
      "compose": [
        {
          "element": "root",
          "apply": "getText"
        }
      ],
      "description": {
        "text": ["get record label text"]
      }
    }
  ]
}
```

This exact method is added to the generated JSON.