Overwrite child components CCS with scoped styles (feature)

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

[agaripian]

Here is a working example that I put together from our existing websites functionality converted to Vue components. I used a Global Style on the Root component which did not work.

https://gist.github.com/agaripian/7b430d1ffa3b360c4709010e7013675c

Profile > followButton > button

Button and followButton have scoped styles. Profile uses Global styles to overwrite children followButton overwrites button styles. Profile can not overwrite button's background color.

Can not overwrite background color

Angular2 with /deep/ adds the unique ID attribute selector from component that is using /deep/. I manually added the the unique id attribute of Profile to its style selector and it solved the problem as well as scoped it properly. It also automatically makes the selector more specific so we can avoid !important. (see blue highlight below)

I want to avoid using Global styles so we can truly scope our css. I can probably find another way of adding some more specific css selector but that just complicates development and debugging.

[agaripian]

Lets take the menu > menuItem example. Menu has a list of child menuItem components. See the below code snippet.

Now if you have 2 different components that use menu-item components on the page and you want to style the menu-items differently on the page.

Using global styles (not scoped) in the menu component (parent) will also change the style of the 2nd menu item on the page unless some other unique identifier is used to scope the styles.

Nothing is stopping me from using BEM, but why use it when there are scoped styles that can solve the problem.

----------- vmenuMain parent component ------------
<template>
  <div class="menu">
    <vmenuItem  v-for="item in menuList" :name="item"></vmenuItem>
  </div>
</template>

<script>
  import vmenuItem from './menuItem';
  export default {
    name: 'vmenuMain',
    components: {
      vmenuItem,
    },
    data() {
      return {
        menuList: ['Home', 'Menu', 'Location']
      };
    },
  };
</script>

<style lang="scss" scoped>
  .menu {
    border: 5px solid black;
  }
</style>
<style lang="css">
//overwrite child component's css
  .menu-item {
     background: red !important;
</style>

---------------- Child component vmenuItem ---------------------

<template>
  <a href="http://www.google.com" class="menu-item"> {{name}}</a>
</template>

<script>
  export default {
    name: 'menuItem',
    props: [
      'name',
    ],
  };
</script>

<style lang="css" scoped>
  .menu-item {
    background: blue;
  }
</style>