> ## Documentation Index
> Fetch the complete documentation index at: https://developers.candu.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# DOM API

Candu's DOM API defines a DOM interface to be able to easily query Candu's state via DOM.

This API often used for the following use cases:

* Testing Candu components via Cypress, Selenium or other integration tests.
* Verifying if a component has rendered.
* Calculate to Fist Paint for a given Candu component.
* Query what components are active on a given Candu page

Here is an example of a Candu injected div.

```html Html theme={null}
<div 
     id="61d1165a-8cf2-4b81-92ae-e3c431c435b3" 
     class="candu-component" 
     data-candu-content-id="ek5Z7Vb4UK"
     data-candu-slug="dashboard-welcome-message" 
     data-candu-placement-id="l_839143f3" 
     data-candu-selector="#dashboard-mount-welcome"
     data-candu-selector-location="End" 
>
  #shadow-root
</div>
```

### id

The Id is a UUID that's randomly generated for internal state keeping purposes. The ID is not stable, and we do not recommend using this id.

### candu-content-id

A `content-id` is an identifier used to reference Content. They are unique across all of Candu. You can find a content id in the editor URL: `/editor/<contentId>/*`. A content can be injected twice in a given page, so the data attribute may not be unique.

### candu-slug

The `slug` is a human readable identifier used for a given Content. A content can be injected twice in a given page, so the data attribute may not be unique.

### candu-placement-id

The `placement-id` is an identifier used to reference which placement is being used for a given piece of content. Placements are set in the `Content`/`Placements` tab. If a content is rendered programmatically using `renderContent` the `placementId` will be a non-stable randomly generated id.

### candu-selector

The selector that is being targeted by a given placement.

### candu-selector-location

Where a Content is being placed in side the selector. Possible values are `End`, `Start` and `Replace`.