Add data-attributes to component's decorator element | Community
Skip to main content
H
harish_malineni
August 26, 2021
Solved

Add data-attributes to component's decorator element

  • August 26, 2021
  • 1 reply
  • 1656 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Fanindra_Surat

    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.html?lang=en

     

    A working example:


    1 reply

    Fanindra_Surat
    Community Advisor
    Fanindra_SuratCommunity AdvisorAccepted solution
    Community Advisor
    August 26, 2021

    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.html?lang=en

     

    A working example:


      H
      harish_malineniAuthor
      August 26, 2021

      Hi @fanindra_surat,

       

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

        Terms & ConditionsAccessibility statement

        Loading footer...