usage ::v-deep selector in vue 3

[ogulcankarayel5]

There is no clue how to use ::v-deep selector for nested classnames in documentation. For example I can migrate this code block to vue 3 according to documentation vue 2

::v-deep {
    .table-footer-container {
      display: none ;
    }
  }

vue 3

:deep(.table-footer-container) {
    display: none 
  }

But I have no idea how to migrate this

::v-deep {
      .v-select {
        .vs__dropdown-toggle {
          background: #fff;
          border-color: #ddd;
        }
        &.vs--open {
          .vs__dropdown-toggle {
            border-color: #ff6000;
          }
        }
      }
    }

It would be better if there was a part about it.

[skirtles-code]

Relevant docs: https://vuejs.org/api/sfc-css-features.html#deep-selectors

If I've understood correctly, the problem being reported here is only directly relevant to Sass. However, the example in the docs only shows :deep() used with a simple selector, which leaves some ambiguity about the correct way to use it with complex selectors, even in plain CSS.

[yangyfeng]

组件内顶级元素的样式深度修改，不生效

<template>
      <FormItem  class="FormItem">
      </FormItem>
</template>
<style scoped lang="less">
 ::v-deep .ivu-form-item {
   // .... 不生效
}
</style>

[stas-p]

In case someone is still wondering - you can also replace ::v-deep with :deep like this:

:deep {
  ul {
    margin-left: 48px;
  }
  a {
    color: #3f51b5;
  }
}

[raisiqueira]

@stas-p I've tried the approach that you shared using with a <style lang="scss" scoped but it did not work. The documentation doesn't let it clear how we handle the v-deep selector using CSS pre-processors.

<style lang="scss" scoped>
  ::v-deep {
    .my-css-overrides-goes-here {
       background-color: #fff;
    }
  }
</style>