How to assign a class to a dynamic component if scoped?

Question

css

Hello, creating a slider - I need to create a div dynamically and style it. However, since scss scoped styles are not applied - is it possible to solve this with scss scoped

<template>
  <div class="slider" ref="slider"></div>
</template>
<style lang="scss" scoped>
.slider {
  width: 100%;
  height: 100%;
background: green;
}
.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

Style encapsulation is implemented by adding a unique (within the component) attribute to elements and, accordingly, to selectors in the css code. You're creating elements by hand, so they don't have the right attribute - so the styles don't apply. To apply, you can use the so-called. deep selector - to do this, replace .frame {with .slider /deep/ .frame {.

But in general,...

...неплохо было бы вам руки оборвать за подобный код:

mounted() {
  for (let i = 0; i < 3; i++) {
    let frame = document.createElement("div");
    frame.classList.add("frame"); //класс присваивается но стили не применяются
    this.$refs.slider.appendChild(frame);
  }
},

Считаете, что читать документацию не надо? Если ваша цель - пополнить ряды говнокодеров, то путь выбрали верный.