Add data-attributes to component's decorator element

[harish_malineni]

I know we can add id, css classes and choose the decorator element type, however, my requirement is to add data-attributes to decorator element. is there a way to achieve it?

[Fanindra_Surat · Accepted solution]

Hi @harish_malineni ,

As per the documentation, you can add any property names on cq:htmlTag node of a component and that will be added to the decoration tag:

• cq:htmlTag node : This node can be added under a component and can have the following properties:
  • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
  • class {String} : This can be used to specify css class names to be added to the wrapper.
  • Other property names will be added as HTML attributes with the same String value as provided.

Ref: https://experienceleague.adobe.com/docs/experience-manager-64/developing/components/decoration-tag.h...

A working example:

[harish_malineni]

Hi @Fanindra_Surat,

Is there any way to add attributes dynamically via SlingModels or Filters?