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>