HTML code injection by Page Composer

Question

Page Composer injects code in the page, changing the DOM, to render the buttons and controls that allow you to create and manipulate your content. These injections of elements in the DOM may alter the rendering of your page.

List and areas

When an area, or list is rendered, the following code is injected in Page Composer:

<div class="jahia-template-gxt" jahiatype="module" id="module62a273e9-9746-452d-92e3-dbe5e8ce841c" type="area" path="[...]" nodetypes="jmix:droppableContent" allowreferences="true" referencetypes="[...]" areaholder="feba3a3f-2fea-4ee1-95ec-00d3954b6d0d" showareabutton="false">
 <div id="x-auto-817" class=" editmodeArea x-component x-border " style="border-width: 1px;">
  <div role="presentation" class=" x-small-editor x-panel-header x-panel-header-areamodule x-component" id="JahiaGxtArea__AREANAME">
   <div style="overflow: visible; float: right;" role="presentation" id="x-auto-818" class=" x-panel-toolbar x-component x-hide-display">
    <table role="presentation" cellspacing="0" cellpadding="0">
     <tbody role="presentation">
      <tr role="presentation"></tr>
     </tbody>
    </table>
   </div>
   <span id="JahiaGxtArea__AREANAME-label" role="heading" aria-level="1" class="x-panel-header-text-areamodule">AREANAME</span>
  </div>
  <div id="x-auto-819" class=" x-component">
   <div class="gwt-HTML x-component" id="x-auto-821">
    COMPONENTS CREATED IN THE AREA WILL BE DISPLAYED HERE, SEE BELOW
    <div class="jahia-template-gxt" jahiatype="module" id="module321b31b7-b4a0-4c1d-a361-c906934c7a24" type="placeholder" path="*" showareabutton="true">
    <div id="x-auto-820" class=" x-component" style="border-width: 0px;">
     ...
    </div>
    </div>
   </div>
  </div>
 </div>
</div>

Components

When a component is added in an area/list, then Page Composer injects the following code:

<div class="jahia-template-gxt" jahiatype="module" id="module6f24a67b-d821-4480-8c19-aa81925c0a16" type="existingNode" scriptinfo="Path dispatch: [...]" path="[...]" showareabutton="true">
 <div id="x-auto-1750" class=" x-component ">
  <div class="gwt-HTML x-component" id="x-auto-1753">
   ACTUAL VIEW OF THE COMPONENT
  </div>
 </div>
</div>

Answer

In your template set, you can define an edit.css file (see example) to enable you to override some of the CSS or write some CSS that will only be applied in Page Composer.