Feature: ViewEncapsulation option to inherit style rules from parent

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ x ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

A component cannot inherit styles from its parent unless the parent uses ViewEncapsulation.None or defines style rules using ::ng-deep. This makes it difficult to create simple general purpose components for things like links, buttons, icons, etc. that look correct wherever they are placed.

Expected behavior

Child component should be able to specify that it will adopt the styles of its container, as if the contents of the component were part of the parent’s template.

Maybe something like ViewEncapsulation.Inherit.

Minimal reproduction of the problem with instructions

@Component({
  selector: 'mb-parent-thing',
  template: `
    <a>This is bold</a><br/>
    <mb-special-link></mb-special-link>
  `,
  styles: ['a { font-weight: bold }']
})
export class ParentThingComponent {
}

@Component({
  selector: 'mb-special-link',
  template: '<a>This should also be bold, but isn't</a>'
})
export class SpecialLinkComponent {
}

Here, I want the anchors within <mb-special-link> to inherit the anchor styling defined in the parent, without requiring the parent to change its encapsulation or use ::ng-deep.

What is the motivation / use case for changing the behavior?

Creating simple component such as this link which automatically adopt the style of their container. Note that I have drastically simplified the ‘special link’ component, in practice it does much more than just wrap a single anchor tag!

Environment

Angular CLI: 6.1.2
Node: 8.11.1
OS: linux x64
Angular: 6.1.1

[mloffer]

This really is critical to using 3rd party libraries. I make use of DevExtreme components extensively, which provide event handlers as hooks to allow me to add and remove classes to control presentation based on the data being displayed. I can no longer control the presentation of these components without turning off view encapsulation entirely and making sure my CSS classes are namespaced properly to prevent collisions.

[simeyla]

This functionality would be invaluable for ‘helper’ components that are ‘children’ of a main component but used only for layout - or to reduce the size of the main component. For example I have a shopping cart checkout and there are several sections with a header - I want to make this app-checkout-section a ‘peer’ component to the checkout page just to clean up the code and incorporate some responsive design logic within it.

Without being able to inherit styles easily I just end up using a bunch of ng-template defined locally - and that quickly becomes a mess. Yes I know the projected ng-content actually belongs to the parent so there’s no issues with styling there. I’d just like the option to disable it.

I’m trying to resist ::ng-deep.