The decoration tag behavior and options described in this article are based on AEM 6.2 CFP1 and later versions of AEM 6.2.

When a component in a web page is rendered, an HTML element can be generated wrapping the rendered component within itself. Wrapping the element primarialy serves two purposes:

A component can only be edited when it is wrapped with an HTML element.

Wrapping an element is helpful in applying custom styles by adding classes to the wrapper or using custom HTML tag for the wrapper.

For developers, AEM offers logic controlling the decoration tags that wrap included elements.

Customizing Wrapper Behavior

The following properties and nodes can be used to control the element wrapping behavior.

cq:noDecoration {boolean} : This property can be added to a component and a true value forces AEM not to generate any wrapper elements over the component.

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.

decorationTagName : This property is an include parameter and can be specified when a component is included using methods such as data-sly-resource, cq:include, sling:include, dispatcher, etc.

The wrapper behavior does differ however depending on if HTL or JSP is used to include the element.

HTL

The behavior of the wrapper dependents on whether the component is included from a HTL container component (cq:isContainer = true property set). A component is always wrapped if it is included from a HTL container component.