Estou usando o Angular2 com interface semântica como uma biblioteca css. Eu tenho este pedaço de código:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

os cartões são renderizados muito bem com um espaço entre esses. como isso:consulte a seção de cartões no link

como os cartões representam algum tipo de visão, pensei em criar um componente, então agora o código é:

<div class="ui three stakable cards">
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
</div>

mas agora o estilo está quebrado, não há mais espaço entre eles.

Existe alguma maneira legal de corrigir isso?

a primeira coisa que pensei em fazer é esta:

my-card-component OLD template:
<a class="ui card">
    [some junk]
</a>

           |||
           VVV

my-card-component NEW template:
[some junk]

and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>

mas isso não é satisfatório, pois quero passar um objeto e o componente definiria automaticamente o[href]=obj.link.

no AngularJS 1.0, houve umreplace: true propriedade que faz exatamente o que eu preciso,existe algo semelhante no Angular2?