V--插槽，无法样式或访问它。

Question

我在我的下一个网页上添加了V型翻转。所以我的模板是这样的。

<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

这是因为scoped样式的 "scoped "是通过使用组件的唯一id作为选择器的一部分。

如果你检查你的应用程序，你会看到这样的东西(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;
}