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
.
Updated 5 months ago