Component scoped style is not applied to the upper level element

[ivstas]

Suppose we have a component like this:

<template>
  <section>
    <p>I am content</p>
  </section>
</template>
<style scoped>
  section { background: white }
  p {color: black}
</style>

After being loaded, it results in html and css like this:

<section class="v-58ec653c">
  <p>I am content</p>
</section>

<style type="text/css">
.v-58ec653c section {
    background: white;
}
.v-58ec653c p {
    color: black
}
</style>

For obvious reasons, .v-58ec653c section is not being applied.

[yyx990803]

You need to use :root to refer to the root element.

[yyx990803]

Note in 3.0.0 it's changed to :scope

[isaaclyman]

@yyx990803 For posterity, can you clarify what :root and :scope do here? Are they the equivalent of :host in Angular 2 scoped styles? (referring to the component's tag itself, in a named component)

[jdstaerk]

Hey, sorry for re-opening this topic, but I'd like to know that too. I can't find anything related to :root or :scope in the docs.

[LinusBorg]

...which is because this comment was made about vue-loader 3.0.0 - we are 10 major versions beyond this now. scoped styles work differently now and this whole thread does not apply anymore.

[blowsie]

I also ended up here...
How to achieve to following?

<style scoped>
:scope {
  --color: #000;
}
.link {
 color: var(--color);
}
</style>