Adobe Target VEC Selectors

[RupalJa]

Hi All, 

We are building an integration for our SPA websites with Target Visual Experience Composer. One thing I wanted to check if the CSS Selectors in VEC. In documentation, its mentioned that we can only use either ID, or CSS class or a default selector based on "Compose" option - https://experienceleague.adobe.com/en/docs/target/using/administer/visual-experience-composer-set-up

Is there an option to use custom data attribute, for example : data-cy= "button-tv-box"

Has someone used custom attribute for selector? 

Thank you in advance for your feedback

Best,

Rupal

[RiteshYadav18]

@RupalJa  as a workaround you can have data attribute specific class and apply to DOM element where you are planning to use data-cy and within that class if apply attribute specific CSS selector to make it unique class 

[RupalJa]

Hi @RiteshYadav18 ,

Thank you for your response and the idea. At the moment, this is not possible since the development teams cannot change add the class right now. Hence, I was thinking is its possible to use data attributes. 

Best,

Rupal

[RiteshYadav18]

@RupalJa in either case you have to apply CSS, so may be use VEC and apply required CSS  as inline CSS  to data attributes - this you can do without having dev/IT support 

[RajeshManoharan · Accepted solution]

Hi @RupalJa ,

Once you pick the element on VEC editor, it will prompt selector value by default on the CSS element selector, There you can edit by adding data attribute and value like below,

Hope this helps !

[RupalJa]

Thanks @RajeshManoharan , I checked it quickly and it worked. I will check more scenarios further.