Skip to content

preview_property_selector - Preview Property Selector#

The preview_property_selector property will be added at the property level and function similarly to the preview_component_selector. The property 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.

The preview_property_selector property will not need tokenization as defined in the preview_component_selector.

The :shadow selector will be a reserved word that functions to indicate traversing a shadow DOM barrier. It MUST be separated by surrounding spaces (or beginning / end of string).

The %nth-child% token will be tokenized with the list position in order of appearance.

Note

Miva will split on spaces within the preview_property_selector and attempt to find each element in order. If, at any point, the “next” element cannot be found, the previous one will be used, or, if no previous element was found, the root level component element will be used.

Example#

{
    "code": "category",
    "prompt": "Category",
    "type": "category",
    "preview_property_selector": ":shadow mmx-hero-slider mmx-hero%nth-child% :shadow mmx-text"
}