CSS样式未应用于Vue组件中的HTML

Question

我正在尝试使用Vue.js制作旋转文字动画，并使用此CodePen作为灵感。

• 我正确地获得了所有HMTL元素（即，如提到的CodePen）。简而言之：

  • 每个单词由多个<span>元素组成，每个元素包含一个字母。
  • 按照特定的时间间隔，每个<span>一个字母都会被.in和.out CSS类应用。这无限期地继续下去。

  • 这是DOM：

    中的样子

    

• 问题在于，无论我使用哪种CSS选择器，我都无法定位.in和.out类，除非我通过{{1}进行操作} Developer Tools：

  • 原始输出：

    

  在我添加Chrome中的类后输出

  • ：

    

以下是我Developer Tools的最低限度代码：

Vue Component

阻止这些类被应用的问题是什么？

Answer 1

您正在使用v-html，但doesn't work with scoped styles。

  

使用v-html创建的DOM内容不受范围样式的影响，但您仍然可以使用深度选择器设置它们的样式。

Answer 2

是的，

<块引用>

v-html

不适用于范围样式。

正如 Brock Reece 在他的文章 Scoped Styles with v-html 中解释的那样，应该这样解决：

<template>   
    <div class="a" v-html="content"></div> 
</template>

<script>   
    export default { 
        data() {
           return {
              content: 'this is a <a class="b">Test</a>',
           }
        },
    } 
</script>

<style scoped>   
.a >>> .b {
color: red;   
}
</style>

Answer 3

这对我有用：

<template>   
    <div class="a" v-html="content"></div> 
</template>

<script>   
    export default { 
        data() {
           return {
              content: 'this is a <a class="b">Test</a>',
           }
        },
    } 
</script>

<style scoped>   
.a ::v-deep .b { 
     color: red;
 }
</style>