preview_component_selector - Preview Component Selector

---

The preview_component_selector property can contain a tokenized selector that will map to a single element in the DOM - the root level element for the flex component to be rendered on screen. This will be a selector utilized by querySelector, so anything available within that scope is acceptable.

Example

{
    "category": "category-carousel",
    "code": "mmx-category-carousel",
    "initialization_template": "init.mvt",
    "instance_template": "instance.mvt",
    "name": "Category Carousel",
    "resourcegroup_code": "mmx-category-carousel",
    "version": "10.10.00",
    "preview_component_selector": "[data-flex-component=\"%component_code%\"][data-flex-item=\"%element_code%\"]",
    "depends":
    {
        "mmx-base": "10.10.00",
        "mmx-text": "10.10.00",
        "mmx-button": "10.10.00",
        "mmx-hero": "10.10.00",
        "mmx-hero-slider": "10.10.00"
    }
}

Available Tokens

Token	Description
%sequence_item_code%	Item code of the linked pagebuilder_seq module. Example: “sequence”, “footer_sequence”, etc.
%sequence_code%	Code for a sequence returned via the pagebuilder_seq API code
%element_item_code%	Item code of the linked pagebuilder_cmp module (ex: “flex”)
%element_code%	Code for an element returned via the pagebuilder_cmp API code. This will always be the “flex_item” code. Example: “three-across”
%component_code%	The code of the “component”. Example: “mmx-image-across”