Overwrite child components CCS with scoped styles (feature) #4298
Description
A Parent component should have the ability to overwrite a child components style when both components only have scoped styles.
Currently there is no way to overwrite a child components css style with scoped styling.
Angular2 has a selecor called /deep/, It would be nice to have a similar feature in Vue
Component styles normally apply only to the HTML in the component's own template.
We can use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component.
In this example, we target all <h3> elements, from the host element down through this component to all of its child elements in the DOM:
COPY CODE
:host /deep/ h3 {
font-style: italic;
}
The /deep/ selector also has the alias >>>. We can use either of the two interchangeably.
The /deep/ and >>> selectors should only be used with emulated view encapsulation. This is the default and it is what we use most of the time. See the Controlling View Encapsulation section for more details.
https://angular.io/docs/ts/latest/guide/component-styles.html#!#sts=%2Fdeep%2F