css - Apply styles from parent in angular2 -

suppose have component template:

<div class="frame">   <span class="user-defined-text">{{text}}</span> </div> <style>   span { font-size: 3em; }   .frame { ... } </style> 

how can merge styles applied component, e.g.

<custom-component [text]="'some text'"> <style>custom-component { font-weight: bold; }</style> 

so final output "some text" both bold and 3em sized?

even better way computed styles host element, that, example, apply background-color applied host border-color of element in template.

• set encapsulation: viewencapsulation.none allow styles outside applied.

import {component, viewencapsulation} '@angular/core';  @component({   selector: 'custom-component',   encapsulation: viewencapsulation.none }) export class custom { 

• use styleurl add css file in combination host selector

:host(.someclass) {       background-color: blue; }  <custom-component class="someclass"></custom-component> 

to apply styles depending on class added element.