<p dir="auto">In my page by using <code class="notranslate">ng-outlet</code>.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-outlet class=&quot;app&quot;&gt;&lt;/ng-outlet&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-outlet</span> <span class="pl-c1">class</span>="<span class="pl-s">app</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">ng-outlet</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I aspect something like, where <code class="notranslate">month-cmp</code> it's just my directive view.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-outlet class=&quot;app&quot; month-cmp&gt;
  &lt;div class=&quot;tasks&quot;&gt;&lt;div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-outlet</span> <span class="pl-c1">class</span>="<span class="pl-s">app</span>" <span class="pl-c1">month-cmp</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">tasks</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Instead I have an extra <code class="notranslate">div</code> that will start  creating some possible css conflict.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-outlet class=&quot;app ng-scope&quot; month-cmp&gt;
  &lt;div month-cmp&gt;
    &lt;div class=&quot;tasks&quot;&gt;&lt;div&gt;
  &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-outlet</span> <span class="pl-c1">class</span>="<span class="pl-s">app ng-scope</span>" <span class="pl-c1">month-cmp</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">month-cmp</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">tasks</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Angular 1 Component Router adds a <code class="notranslate">&lt;div&gt;</code> who wraps the template's content :</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;ng-outlet&gt;
    &lt;div component-name=&quot;&quot; ng-scope&gt;
        &lt;!--- template content --&gt;
    &lt;/div&gt;
&lt;/ng-outlet&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">ng-outlet</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">component-name</span>="" <span class="pl-c1">ng-scope</span><span class="pl-kos">&gt;</span>
        <span class="pl-c">&lt;!--- template content --&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">ng-outlet</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">But this behaviour breaks some CSS rules, for example with angular material.</p>
<p dir="auto">Why this div is added ? If it is mandatory, how add attributes (who will compiled after) to this div from the template ?</p>