Как присвоить динамическому компоненту класс если scoped?

Question

[lillianfisher]

Создавая слайдер, мне нужно динамически создавать div и присваивать ему стили. Однако, так как scss scoped стили не применяются - можно ли решить это при 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

[0xD34F]

Инкапсуляция стилей реализуется путём добавления уникального (в пределах компонента) атрибута элементам и, соответственно, селекторам в css-коде. Вы создаёте элементы вручную, так что нужный атрибут у них отсутствует - поэтому стили не применяются. Чтобы применились, можно воспользоваться т.н. глубоким селектором - для этого замените .frame { на .slider /deep/ .frame {.

А вообще,...

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

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

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

Comments

[lillianfisher]

Спасибо, можно ли пожалуйста попросить ссылку на статью или пример того как ето делать правильно

[0xD34F]

lillianfisher, что, намёк оказался слишком тонким? Ну давайте скажу прямо: откройте документацию vue и начинайте читать - там написано, как правильно.

[WapSter]

lillianfisher, https://ru.vuejs.org/v2/guide/class-and-style.html