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>
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.
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.
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.
placement-id is an identifier used to reference which placement is being used for a given piece of content. Placements are set in the
Placements tab. If a content is rendered programmatically using
placementId will be a non-stable randomly generated id.
The selector that is being targeted by a given placement.
Where a Content is being placed in side the selector. Possible values are
Updated 3 months ago