AEM component - attributes and styles




We are starting to create Adobe Components. We are in a big company and we're trying to translate web-components into AEM.
So for example, on authoring mode, we're binding attributes instead of styles in our component's modal.
Is there a way to create a data-set or a system to get those attributes easily instead of redefining them each time ?

Thanks for your help.

Accepted Solutions (1)

Accepted Solutions (1)




Hi @marjorielazaro,

I'm not sure I've understood exactly what you're looking for... but if you mean "How can I easily pass a number of attributes to a web-component element in HTL" then the asnwer is to use a Map and the data-sly-attribute expression.

Here is an example:


public interface DemoModel {
    Map<String, String> getAttributes();


        adaptables = Resource.class,
        adapters = DemoModel.class,
        resourceType = "demo/components/content/demo"
public class DemoModelImpl implements DemoModel {

    private Map<String, String> attributes;

    public void init() {
        attributes = new HashMap<>();
        attributes.put("href", "");
        attributes.put("target", "_blank");


<div data-sly-use.model="com.theopendle.core.models.DemoModel">
    <a data-sly-attribute="${model.attributes}">Demo component</a>



You can read the documentation in more detail here:

Answers (1)

Answers (1)



Thanks that's exactly what we've been doing so far.
We're not having difficulties with the attributes per say. It's more on the author side that's it's a challenge.
For a regular component, we configure the style system and the modal allowing the author to add the component in the page is dynamic and automatic.
For a web component using attributes it's less easier, or we didn't find the way yet.
Basically, we would like to get the values of the attributes dynamically in the modal. Can we still use the style system or not ?
How should we proceed ? What's your advice ?