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:
Interface:
public interface DemoModel {
Map<String, String> getAttributes();
}
Model:
@Model(
adaptables = Resource.class,
adapters = DemoModel.class,
resourceType = "demo/components/content/demo"
)
public class DemoModelImpl implements DemoModel {
@Getter
private Map<String, String> attributes;
@PostConstruct
public void init() {
attributes = new HashMap<>();
attributes.put("href", "https://www.google.com");
attributes.put("target", "_blank");
}
}
HTL:
<div data-sly-use.model="com.theopendle.core.models.DemoModel">
<a data-sly-attribute="${model.attributes}">Demo component</a>
</div>
Result:

You can read the documentation in more detail here: https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html#attrib...