How to Correctly Use "Scoped" Styles in Vuejs Single File Components

how to use scoped css

In the style block you can specify scoped like so:

<va-input label="Device ID"
 class="label-style"
 type="text" 
 v-model="deviceid" 
 required>
</va-input>
<!-- above is in the template -->

<style lang="css" scoped>
.label-style label {
    color:red,
    font-size:20px
}
</style>

This will make this style dependent on data tags and won't affect things globally. This can be a bit slow so you may want to look into something like BEM or CSS modules for a more performance-oriented solution.

Vue scoped styling not working with elements that have been added inside a slot

You can use the v-deep combinator to target child elements/components e.g.:

.wrapper::v-deep .child { background-color:#fff; }

See the Deep Selectors documentation for more detail.

Update

It seems ::v-deep .child has been deprecated. Use ::v-deep(.child) {} or :deep(.child) {} instead. See the RFC for more detail.

How to apply Vue.js scoped styles to components loaded via view-router?

This is probably what you want https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors

Since your code snippet specifically uses SCSS you'll have to use the /deep/ combinator.

---

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator:

<style scoped>
.a >>> .b { /* ... */ }
</style>

The above will be compiled into:

.a[data-v-f3f3eg9] .b { /* ... */ }

Some pre-processors, such as SASS, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

---

So you'd end up with:

<style lang="scss" scoped>
  #admin {
    some-property: some-style;

    /deep/ .actions {
      some-property: some-style;
    }
  }
</style>

Non-scoped styling in components applied only once when switching routes

I opened a bug report for this and it ended up being expected behaviour. The summary from the report comments:

Thorsten Lünborg:

Yes, this is expected. Vue (or rather, webpack) does not insert and
remove these styles, as you seem to think. They are injected into the
head once the component renders, and never removed.

A common pattern is to extarct all CSS into a single .css file in
production, which would have the same result.

My summary in the context of the question:

• initially (no route, no component rendered) nothing was injected
• the first component is rendered on route switch, its style is injected
• the second component is rendered on route switch, its style is injected and overwrites the previous style
• further route switches do not inject anything as each component was already rendered once. The last style used therefore stays as the authoritative one.

I will therefore fallback on binding the body class to the current component's data

Scoped Styles are always overwritten

The problem here is that your child-component's root element is a section

By design, a parent component is able to style the child components root.
In general this is used so you can easily style a child component, add margin, padding etc. But in your case it is conflicting.

What you see:

<template>
  <div>
    <section>...</section>
    <your-component></your-component>
  </div>
</template>

What your scoped css sees:

<template>
  <div>
    <!-- I can style out here -->
    <section>...</section>
    <section>
    <!-- But I can't style in here -->
    </section>
  </div>
</template>

The scoped css knows not to go INTO the component, but the components root as basically at the level that it is allowed to style, and since it's a section, the css selector is valid.

If you just wrap your child component like this, there will be no conflict:

<template>
  <div>
    <section>...</section>
  </div>
</template>

You can also style them with different classes etc.

Here is the official docs on it.

---

Related Topics