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.

<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.