How to use ::v-deep selector for nested classes in vue

Question

I know the ::v-deep selector has been changed in vue 3. I understood how to use it with one class but I can't find any sources about nested classnames. For example:

vue2

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

vue 3

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

But how can I transform this code block to vue 3 version ?

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

tony19 · Accepted Answer · 2022-06-24 02:13:25Z

10

Wrap both nested selectors in :deep():


<style scoped lang="scss">
.v-select {
  color: green;
     👇
  &:deep(.vs__dropdown-toggle) {
    background: #fff;
    border-color: #ddd;
    color: red;
  }
     👇
  &:deep(.vs--open) {
    .vs__dropdown-toggle {
      border-color: #ff6000;
      color: blue;
    }
  }
}
</style>

demo

answered Jun 24, 2022 at 2:13

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomson · Accepted Answer · 2023-02-16 15:04:56Z

If you want to keep the code changes simple, you can also undermine the obligation to use a child selector very easily by allowing the changes to all child elements through the asterisk operator:

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

This solution makes more sense in many cases, because the old structure of your (BEM) notation is not lost this way. For example, the following code...

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  ::v-deep &__link {
    text-decoration-color: red;
  }
}

... can be converted to this...

.paragraph {
  &__headline {
    margin-bottom: 2rem;
  }
  &__text {
    margin-bottom: 20px;
  }
  :deep(*) &__link{
    text-decoration-color: red;
  }
}

...without changing any structure.

Collectives™ on Stack Overflow

How to use ::v-deep selector for nested classes in vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related