Scoped style in custom components

Questions
1

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

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

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

    },
    on: {

    }
  }
</script>

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

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?

2

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

3

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?

4

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

2 Likes