v-html中h1标签样式失效了

### 解决 `v-html` 中 `<h1>` 标签样式失效的问题

当遇到 Vue.js 的 `v-html` 导致 `<h1>` 或其他 HTML 元素样式失效的情况时，通常是因为通过 `v-html` 插入的内容不会自动应用 scoped CSS 或者某些样式规则未被正确加载。

#### 方案一：移除 Scoped 属性
如果页面中的样式是使用 scoped CSS 定义的，则这些样式仅适用于当前组件内的模板部分。对于动态插入的内容（如由 `v-html` 渲染），则不受此作用域样式的约束。因此可以考虑将样式定义移到全局范围来解决问题[^1]：

<style>
/* 将原本带有scoped属性的选择器改为全局 */
.h1-custom {
    color: red;
}
</style>

<template>
<div>
  <!-- 使用类名而非直接设置内联样式 -->
  <div v-html="content"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      content: '<h1 class="h1-custom">这是一个标题</h1>'
    }
  }
};
</script>

#### 方案二：引入 PostCSS 处理工具
为了确保生成的 CSS 文件能够适配不同浏览器并正常工作，建议配置构建工具链以支持自动添加必要的供应商前缀。这可以通过安装和配置像 `postcss-pxtorem` 这样的插件实现。

#### 方案三：调整 Webpack 配置
有时可能需要修改项目的 Webpack 构建配置文件 `/build/utils.js` 来改变默认行为，比如可以在 css-loader 前面加上 vue-style-loader 让其优先处理样式资源[^2]。

#### 关于虚拟 DOM 及 key 属性的影响
值得注意的是，在涉及列表渲染或条件渲染的情况下，合理利用好 `key` 属性可以帮助优化性能以及防止不必要的重绘问题。不过这个问题与 `v-html` 所引起的样式丢失无直接关联[^3]。