Extend/Override style of reusable angular2 component
<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>