title: Is there any way to only render the template/content of my Angular component?
body: <p>I want to have a clean HTML, only the component content and not the container, because I want to use <a href="https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/" rel="nofollow noreferrer">ITCSS</a> and <a href="http://rscss.io/" rel="nofollow noreferrer">RSCSS</a> methodologies.</p>
  
  <p>So, thinking that I have 2 components: <strong>app-simple-card</strong> and <strong>app-superior-header</strong>; I want have the following structure.</p>
  
  <p><strong>simple-card.component.scss</strong></p>
  
  <pre><code>.simple-card {
      &gt; .header {
          @extends .superior-header;
          @extends .superior-header.-compact;
      }
  }
  </code></pre>
  
  <p><strong>superior-header.component.scss</strong></p>
  
  <pre><code>.superior-header {
      &gt; .title {}
  
      &amp;.-compact {}
  }
  </code></pre>
  
  <h2>The problem</h2>
  
  <p>Angular renders a "container" for the component content, forcing me to use the component name as part of the selector. It is against the RSCSS methodology, so I don't want to do it that way, and it would awful to reuse the styles in another project.</p>
  
  <p>Right now, the scss file would look like this:</p>
  
  <pre><code>.simple-card {
      &gt; app-superior-header &gt; .header {...}
  }
  </code></pre>
  
  <p>I also don't want to use the <a href="https://stackoverflow.com/questions/34588933/how-to-remove-replace-the-angular2-components-selector-tag-from-html">component as an attribute</a>, because it wouldn't solve my problem, <a href="https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-03" rel="nofollow noreferrer">and it's not considered a good practice</a>. I need to completely remove/replace the component "container" only showing it's content.</p>