Add common custom static class to component wrapper div

[Abhilasha_S]

Hi All, Is there any way apart from cq:htmlTag to customize wrapper div for all components with single configuration?...we need a way to identify all aem component wrappers on live page for automation purpose.

[EstebanBustamante]

You have the option to remove the wrappers for a component by using cq:noDecoration, OR you can use the cq:htmlTag to change the wrapper (class and element type), beyond that, you don't have more options.

Another thought is that actually, you can infer the class name which is set by default in each component, if you look closer, the wrapper dive will always set the "component name" as its class, so you can take advantage of this to write your automation code.

Can you describe more what you are trying to do, to explore alternatives? 

You can learn more about the decoration tag here: https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h... 

[Abhilasha_S]

Hi @EstebanBustamante ,

This class will not be used to style components but help in identifying all components on a page with a single HTML query for further processing in component specific test automation.

[EstebanBustamante]

Then, you can use the default class which is populated without any extra config as I explained above. This class corresponds to the component name (node name). 

[Tanika02]

Hello @Abhilasha_S  - 

I would recommend using a CSS class to achieve this!

• Create a custom CSS class that defines the styling and attributes for the wrapper div.
• In AEM, navigate to the Design mode and open the desired template or component.
• Edit the corresponding client-side code (e.g., CSS or JS file) associated with the template or component.
• Add the custom CSS class to the wrapper div or any specific container element.
• Save the changes and publish the template or component.

[aanchal-sikka · Accepted solution]

Hello @Abhilasha_S 

One way is to use Decorator Filter. It will allow you to add custom classes to wrapper. Please refer to:

https://stackoverflow.com/questions/26102239/aem-cq-conditional-css-class-on-decoration-tag

[Abhilasha_S]

Hi @aanchal-sikka ,
Although adding cq:htmlTag is correct way this solution worked great to intercept and change classes for multiple components.