How can I use /deep/ in SCSS?

Question

Hello as we know if we use <style scoped> we can protect other elements from our styles. if we appends dinamic elements we should use parent-class /deep/ current-class but how can I use it using SCSS

Example code [working]

<template>
  <div class="slider" ref="slider"></div>
</template>
<style scoped>
.slider {
  width: 100%;
  height: 100%;
  background: green;
}
.frame /deep/ .frame{
  width: 100%;
  height: 100%;
  background: blue;
}
</style>
<script>
export default {
  name: "Slider",
  mounted() {
    for (let i = 0; i < 3; i++) {
      let frame = document.createElement("div");
      frame.classList.add("frame");
      this.$refs.slider.appendChild(frame);
    }
  },
};
</script>

with errors

<template>
  <div class="slider" ref="slider"></div>
</template>
<style lang="scss" scoped>
.slider {
  width: 100%;
  height: 100%;
  background: green;
}
.frame /deep/ .frame{
  width: 100%;
  height: 100%;
  background: blue;
}
</style>
<script>
export default {
  name: "Slider",
  mounted() {
    for (let i = 0; i < 3; i++) {
      let frame = document.createElement("div");
      frame.classList.add("frame");
      this.$refs.slider.appendChild(frame);
    }
  },
};
</script>

Answer 1

Updated.

<style scoped lang="scss">

::v-deep .frame {
}

</style>