Remove component wrapper divs in CQ/AEM

Remove enclosing component divs in AEM/CQ.
When working on a project we sometimes face situations where our HTML, CSS, and JS have already been developed and we need to integrate our AEM components into them.

Now, in AEM when we create a component then the rendered component has a parsys <div> tag enclosing the markup of our component. This might sometimes be problematic as it might break the styling of the component.

Say for example we want our component markup to look like this:<ul> <li>Codermagnet</li> <li>Java</li> <li>AEM</li> </ul>

But the rendered markup ended up like this:<ul> <div class="myComponent"><li>CoderMagnet</li></div> <div class="myComponent"><li>Java</li></div> <div class="myComponent"><li>AEM</li></div> </ul>

So we must remove the unnecessary tag or manipulate it.

For doing this we have the following options:
1. Using cq:noDecoration to remove extra AEM component divs.
2. Using the IncludeOptions class to remove the AEM component divs.
3. Using the cq:htmlTag to manipulate component divs.
Using cq:noDecoration to remove component divs.
The cq:noDecoration property removes the enclosing component divs.



The component above will not have the enclosing divs but the problem is that it will not be editable from the sidekick anymore.
Using the IncludeOptions class to remove the AEM component divs.
cq:noDecoration makes the component uneditable. Neither the editconfig not the dialog is visible.
So the ideal approach to do this is to use the IncludeOptions class.
For this, we need to include the following snippet just before we cq:include our component. <% IncludeOptions opts = IncludeOptions.getOptions(request, true); opts.setDecorationTagName(""); %>

The full code snippet looks like this.<%@ page import="com.day.cq.wcm.api.components.IncludeOptions" %> <% IncludeOptions opts = IncludeOptions.getOptions(request, true); opts.setDecorationTagName(""); %> <cq:include path="mycomp" resourceType="/apps/myproject/myComponent"/>

Using the cq:htmlTag to manipulate component divs
Out of the box, AEM components create a number of wrapper div in the generated HTML code which is used by the editing system and to identify various components in the DOM.

However, sometimes this may cause unnecessary problems as the HTML structure becomes different from the one you started with.

We can use cq:htmlTag to manipulate the wrapper divs.
First, we need to create an nt:unstructured node under our component.


This node will contain the following:
1. class - The CSS class names that may be used for styling.
2. id - The id of the element in the rendered HTML.
3. cq:tagName - The tag that will be used to represent our component in the DOM (div, span, p, etc.)



This will render the component enclosed in the below element. <span id="mycomponent" class="modern-style"> … </span>