title: Extend/Override style of reusable angular2 component
body: <p>Assuming we want to use a component from some library in angular2 (example from <a href="https://github.com/angular/material2">material2</a>). The component annotation looks like this:</p>
  
  <pre><code>@Component({
    moduleId: module.id,
    selector: 'md-input',
    templateUrl: 'input.html',
    styleUrls: ['input.css'],
    providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
    host: {'(click)' : 'focus()'}
  })
  </code></pre>
  
  <p>This component ships with a "default" stylesheet, the "input.css". If we use this component in our app we likely want to override/extend some of the style, without copying and manipulating the component itself. How to do this?</p>
  
  <p><strong>Possible Solution 1: Set the Encapsulation to "ViewEncapsulation.None":</strong><br>
  This is not really a solution, just a workaround.  </p>
  
  <p><strong>Possible Solution 2: Use "::shadow" or "/deep/" in CSS:</strong><br>
  Works also, but its deprecated according to WebComponent spec.</p>
  
  <p><strong>Possible Solution 3: Use global CSS and override the component CSS:</strong><br>
  Works also, but it violates the shadow DOM concept.</p>
  
  <p><strong>Possible Solution 4: Override directly in the template of parent component:</strong></p>
  
  <p>Example:</p>
  
  <pre><code>&lt;my-cmp [font-size]="100"&gt;&lt;/my-cmp&gt;
  </code></pre>
  
  <p>Is not really suitable if we do a lot of overriding.</p>
  
  <p><strong>Possible Solution 5: Override or extend the "@Component" definition with an additional stylesheet somehow:</strong><br>
  This seems to be the only correct solution (at least for me). But i have no idea how to do this...</p>
  
  <p>Any advice on this? Maybe i got something wrong...
  Thanks.</p>