AEM - Sightly : data-sly-attribute erasing css on tag

Question

I am currently working on components for AEM 6.0, I've noticed a quite strange behavior of the data-sly-attribute sightly attribute and I'm wondering if this is something that has been noticed by others (maybe a bug).

Take the following code:

TEMPLATE (html)

<div id="${properties.divId}" 
data-sly-use.attr="com.something.sightly.promoModel" 
     data-sly-attribute="${attr.attributeMap}">

     <a href="www.example.com" 
        class="btn btn-transparent" 
        data-sly-attribute.target="${properties.ckbNewWindow}" 
        **data-sly-attribute="${attr.attributeMap}"**>
       ${properties.ctaText}
    </a>

</div>

Model (java)

public class PromoModel{
    protected HashMap<String, String> attributeMap = new HashMap<String, String>();
    @Override
    public void activate() throws Exception {
        attributeMap= ComponentUtils.buildDataAttributeMapFromResource(Constants.DATA_ATTRIBUTES_FIELD, getRequest());
}

public HashMap<String, String> getAttributeMap(){
    return attributeMap;

}

with buildDataAttributeMapFromResource function that basically populates the HashMap based on what content is in the component.

The issue is, when this code is executed on Author it works great but when I execute it on a Publisher the:

class="btn btn-transparent"

does not render. It seems like data-sly-attribute is overwriting it and thus erasing it because if I change my template to this:

<div id="${properties.divId}" 
data-sly-use.attr="com.something.sightly.promoModel" 
     data-sly-attribute="${attr.attributeMap}">

     <a **data-sly-attribute="${attr.attributeMap}"**
        href="www.example.com" 
        class="btn btn-transparent" 
        data-sly-attribute.target="${properties.ckbNewWindow}">
       ${properties.ctaText}
    </a>

</div>

Notice that

data-sly-attribute="${attr.attributeMap}"

is in front of

class="btn btn-transparent"

it renders perfectly fine on Author and Publisher.

Bug ? Maybe there is a fix for this out there that I'm not aware of ... ? Any advice would be great.

Thanks Nicola

Have you tried the XSS context? Here is the documentation: docs.adobe.com/docs/en/aem/6-0/develop/sightly/… Context Something like data-sly-attribute="${attr.attributeMap @context='styleString'}" — Bambara

Jordan Shurmer Jordan Shurmer · Accepted Answer · 2016-04-04T14:44:54

Seems like this is likely the expected behavior. Here's a quote from Adobe's docs:

Attributes are resolved left to right, with the rightmost instance of an attribute (either literal or defined via data-sly-attribute) taking precedence over any instances of the same attribute (defined either literally or via data-sly-attribute) defined to its left.

That would mean that if your attribute map contained a class attribute then it will take precedence over the literal class attribute if it's further to the right.

AEM - Sightly : data-sly-attribute erasing css on tag

1 Answers