V - слот, нельзя стилизовать или получить к нему доступ

Question

Я добавляю v-flip на свою страницу nuxt. Итак, мой шаблон выглядит так:

<div class="about__cards">
 <vue-flip class="about__single-card" active-click width = "350px" height="450px">
    <template v-slot:front>
        <p class="about__title">Stacks</p>
      </template>

      <template v-slot:back>
        <h4>My stacks</h4>
        <ul>
          <li>Javascript</li>
          <li>Css</li>
          <li>HTML</li>
          <li>Vue</li>
          <li>Nuxt</li>
        </ul>
      </template>
    </vue-flip>
...

Это был мой стиль:

.about__cards{
  display:flex;
  justify-content: space-evenly;
  /* background-color: transparent; */
}
.about__single-card{
  border:1px red solid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.front{
  background: red;
  width: 100%;
  height: 100%;
  /* line-height: 448px; */
  text-align: center;
  vertical-align: middle;
 /*  display: flex;
  flex-direction: column;
  align-content: flex-end; */
}

Я поставил вперед, потому что при осмотре элемента, который я увидел, был присвоен этот класс. Все вроде работает. Потом я понял, что не изучил стиль, поэтому возился с другими страницами. Я сделал, перезапустил сервер, и теперь стиль v-слота больше не работает. Но если я пойду осмотреть элемент и перейду к"front"класс, который был задан заранее, я могу изменить его там... Я читал, что вы можете стилизовать v-слоты, но до того, как я это сделал, я немного запутался. Что мне здесь не хватает? Спасибо

Answer 1

Это связано с тем, что стили с заданной областью видимости "ограничены" использованием уникального идентификатора компонента как части селектора.

Если вы проверите свое приложение, вы увидите что-то вроде этого (1d328d7aэто uid)

<div
  data-v-1d328d7a=""
  class="field-input-wrapper"
...

.field-input-wrapper[data-v-1d328d7a] {
  ...

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

.about__single-card >>> .front{
  background: red;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}