title: How to remove extra wrapping elements in the rendered HTML?
body: <p>I started learning angular 5 3 days ago so I'm quite new at it. I also use angularJS and React to develop applications and I think I don't understand how angular 5 components fully work. If I create for example a custom button that has a custom text inside (I'm not saying this should be done this way but it's a simple example that shows my point) like this:</p>
  
  <pre><code>&lt;app-button&gt;
    &lt;app-text&gt;
      My Text
    &lt;/app-text&gt;
  &lt;/app-button&gt;
  </code></pre>
  
  <p>The rendered DOM results in:</p>
  
  <pre><code>&lt;app-button&gt;
    &lt;button&gt;
      &lt;app-text&gt;
        &lt;span&gt;
          My Text
        &lt;/span&gt;
      &lt;/app-text&gt;
    &lt;/button&gt;
  &lt;/app-button&gt;
  </code></pre>
  
  <p>which is unreadable, I wanted to know if there's a way to remove this wrapping elements and just place the components layout replacing the tags resulting in the following structure:</p>
  
  <pre><code>&lt;button&gt;
    &lt;span&gt;
      My Text
    &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>If there's no way of removing them what are your suggestions? thanks! </p>