Angular2 component styles are not inherited in an encapsulated child component

Question

I am writing two components - componentA and componentB. where componentA encapsulates component B. Both have a 'p' tag. In my component A, I write styles: [ p{color:red} ] inside my @Component decorator. Component A p is changed to red, and the color of the component component remains black.

I think this is a mistake that needs to be resolved.

Answer 1

Encapsulation style (preventing erasure due to the expiration of blood pressure in or out of components) is a major feature of Angular components.

There are various options for achieving the desired result.

 @Component({ selector: 'component-b', styles: [` p { color: red; } `] ... encapsulation: ViewEncapsulation.None }) 

or you can change the CSS selector to cross component borders with the recently introduced (Angular2) CSS shadow piercer combinator >>>

 @Component({ selector: 'component-b', styles: [` :host >>> p { color: red; } `] ... }) 

The second approach works with default encapsulation ( ViewEncapsulation.Emulated ) or encapsulation: ViewEncapsulation.None , but here >>> is redundant. You cannot use >>> with encapsulation: ViewEncapsulation.Native - actually you can currently, but >>> (or the /deep/ equivalent) is deprecated for the shadow DOM.

hint : /deep/ seems to work better with SASS than >>>

Answer 2

It's not a mistake.

Component styles usually only apply to HTML in the component’s own template - link

If you want the styles that you define in the parent component to affect the components of the ancestors, I would use the /deep/ selector (which has the alias >>> as the Günter used in his answer) in the parent component, which will result in the style down through all the components of the ancestor. Please note that this will apply style to all representations of both children and children of the content.

 @Component({ selector: 'component-a', styles: [`/deep/ p { color: red; }`] }) 

Plunker

See also the Special Selectors section of the developer guide for component styles.