title: Angular 2 + Semantic UI , component encapsulation breaks style
body: <p>I'm using Angular2 with Semantic UI as a css library. I have this piece of code:</p>
  
  <pre><code>&lt;div class="ui three stakable cards"&gt;
     &lt;a class="ui card"&gt; ... &lt;/a&gt;
     &lt;a class="ui card"&gt; ... &lt;/a&gt;
     &lt;a class="ui card"&gt; ... &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the cards are rendered nicely with a space between and such.
  like this: <a href="http://semantic-ui.com/views/card.html" rel="noreferrer">refer to cards section in the link</a></p>
  
  <p>since the cards represent some kind of view I thought of making a component out of it, so now the code is:</p>
  
  <pre><code>&lt;div class="ui three stakable cards"&gt;
     &lt;my-card-component&gt;&lt;/my-card-component&gt;
     &lt;my-card-component&gt;&lt;/my-card-component&gt;
     &lt;my-card-component&gt;&lt;/my-card-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but now the style is broken, there is no space between them anymore.</p>
  
  <p><strong>Is there any nice way of fixing this ?</strong></p>
  
  <hr>
  
  <p>the first thing I thought of doing is this:</p>
  
  <pre><code>my-card-component OLD template:
  &lt;a class="ui card"&gt;
      [some junk]
  &lt;/a&gt;
  
             |||
             VVV
  
  my-card-component NEW template:
  [some junk]
  
  and instantiating like:
  &lt;my-card-component class="ui card"&gt;&lt;/my-card-component&gt;
  or like:
  &lt;a href="?" my-card-component&gt;&lt;/a&gt;
  </code></pre>
  
  <p>but this is not satisfactory since I want to be able to pass in an object and the component would automatically set the <code>[href]=obj.link</code>.</p>
  
  <hr>
  
  <p>in AngularJS 1.0 there was a <code>replace: true</code> property which does excatly what i need, <strong>is there a similar thing in Angular2 ?</strong></p>