在vue中,当style标签有scoped属性时v-html属性内容无样式

最新推荐文章于 2025-10-24 16:38:47 发布

原创最新推荐文章于 2025-10-24 16:38:47 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scoped #&gt;&gt;&gt; #deep #css #vue

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

vue.js

2 篇文章

订阅专栏

在Vue里，<style>标签有scoped属性时，CSS仅作用于当前组件元素，它通过PostCSS转义，给节点加唯一戳保证样式作用域。但v-html创建的DOM内容不受其样式影响，可使用深度作用选择器解决，不过该选择器支持程度差异大，官方推荐用 /deep/ 操作符，less可用选择器变量解决。

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。vue使用PostCSS方式对style进行转义，它会给节点添加唯一的戳，保证样式的作用域。
贴上官方给的例子：

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

<template>
  <div class="example">hi</div>
</template>

转换结果:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

通过 v-html 创建的 DOM 内容不受作用域内的样式影响。就是scoped属性产生的影响，推测原因是转化过程在代码运行前就完成了，但是v-html内容却是动态的，导致样式无效。解决方案也很简单，就是使用深度作用选择器>>>。这个css选择器的支持程度差异很大，而且标准也一直在变，可能Sass，less等预处理器不识别直接报错。官方给的方案是

使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

div /deep/ span {
  font-size: 12px;
}

如果使用less还可以使用less的选择器变量来解决问题。

@deep: ~">>>";

div @{deep} span {
  font-size: 12px;
}