How to Remove Div Wrapper from Component

AEM wrap by default each component html placed in a page with a DIV tag with an associated class named matching the component name:

<div class="mycomponentname">
...
...
</div>
This wrapper DIV is used by AEM especially for edit mode purpose. Normally you just do not care about this DIV and sometimes you can also use it in order to style your component by css.

But what happen if you want to remove this DIV?
You may ask, why I should want to remove the DIV wrapper? You may want to remove it for any reason, for example a common case you need to exactly reproduce a provided html layout that you cannot modify.

There are mainly 3 ways to hide or remove the decorator DIV wrapping component:

1. Define property cq:noDecoration=true
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0&quot;
xmlns:cq="http://www.day.com/jcr/cq/1.0&quot;
xmlns:jcr="http://www.jcp.org/jcr/1.0&quot;
jcr:primaryType="cq:Component"
jcr:title="Image Render"
sling:resourceSuperType="foundation/components/image"
cq:noDecoration="true"
componentGroup=".hidden"/>
It’s the easiest way … but I think it is probably almost useless because it removes it in all cases, even on edit mode … so the component will result not editable at all.

2. Use IncludeOptions forceSameContext
You can place this simple Java code instruction before including the component:

IncludeOptions.getOptions(getRequest(), true).forceSameContext(Boolean.TRUE);

It can be invoked either into a JSP (CQ5) or by Java/Javascript API (AEM6+Sightly).

It removes the DIV wrapper only for the next rendered component. So it will not apply to other included components that will continue to be wrapped on its own DIV.
It can be useful especially when you handle a component embedded into page template since you can add the instruction only if you are not in edit mode.


3. Use attribute BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE

request.setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false);

(importing com.day.cq.wcm.api.components.ComponentContext)

Also, this instruction is a piece of Java code you can use in a similar way as mentioned above.
Rather than the previous option, it removes the wrapper DIV for all next rendered components until the request is run out or you explicitly disable it.