title: Angular + Bootstrap styles break with sub-components
body: <p>I'm trying to use bootstrap's button group, which in raw HTML looks like this:</p>
  
  <pre><code>&lt;div class="btn-group btn-group-toggle" data-toggle="buttons"&gt;
    &lt;label class="btn btn-secondary active"&gt;
      &lt;input type="radio" name="options" id="option1" autocomplete="off" checked&gt; Active
    &lt;/label&gt;
    &lt;label class="btn btn-secondary"&gt;
      &lt;input type="radio" name="options" id="option2" autocomplete="off"&gt; Radio
    &lt;/label&gt;
    &lt;label class="btn btn-secondary"&gt;
      &lt;input type="radio" name="options" id="option3" autocomplete="off"&gt; Radio
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This hierarchy must be strictly adhered to (ie: putting elements in between the <code>&lt;labels&gt;</code> will break the CSS).</p>
  
  <p>In my Angular code, the buttons are quite complex and are driven via an <code>*ngFor</code>, so I've decided to extract the button component structure (ie: <code>&lt;label&gt;&lt;input&gt;&lt;/label&gt;</code>) as it's own component. So my button group template looks like this:</p>
  
  <pre><code>&lt;div class="btn-group btn-group-toggle" data-toggle="buttons"&gt;
    &lt;ng-container *ngFor="let actionType of actionTypes"&gt;
      &lt;ek-action-button [actionType]="actionType"&gt;&lt;/ek-action-button&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However this breaks the CSS because the parent/child relationship changes when rendered. I've read in other questions that these kind of cases should use an attribute selector (ie: <code>[ek-action-button]</code>) but this still places an extra element in between and breaks the css.</p>
  
  <p>Are there any solutions to this? How do I remove the host? I can't use an attribute selector on an ng-container. </p>