Scoped style in custom components

So, I have the following markup in my custom component (I’ll show only important parts):

  <div class="item-content item-input {{status}}">
    <div class="item-inner">
      <div class="input-label">{{label}}</div>
    <div class="item-input-wrap">
        <input type="text" name="" value="{{inputValue}}">

  export default {
    data () {
      return {
        label: 'Preferred activities',
        inputValue: '',
        status: 'success',
    methods: {

    on: {


<style scoped>
  input {
    border-radius: 8px;
    height: 56px;
    padding-left: 20px;
  .item-input.success .item-input-wrap {
    border: 2px solid #3AA76D;

Without scoped attribute everything works fine, however when I add it, nested styles such as .item-input.success .item-input-wrap in my example stop working, they just don’t show in browser inspector. It’s not a hot reload problem, full restart of server also doesn’t help. I thought maybe it’s a {{status}} problem, but even if I hardcode success as class it doesn’t work. Seems like it’s definitely a scope attribute problem/bug. Any suggestions?

It is because it is root element, replace .item-input.success .item-input-wrap with {{this}}

As far as I can understand, you mean that <div class="item-content item-input {{status}}"> is root component and I should refer it as {{this}}. But, as you can see, I have a variable in class property. Should I wrap the whole component in div and then refer it like {{this}}.item-input.success?

If you want to reference root element of component you need to use {{this}} in scoped styles, so .item-input.success .item-input-wrap should be changed to {{this}}.success .item-input-wrap