uni-app rich-text在H5端部分标签不会加上 data-v-xxxx 属性

操作步骤：

见描述

预期结果：

见描述

实际结果：

见描述

bug描述：

<template>
    <view>
        <view class="content">
            <rich-text class="rich-text" :nodes="content"></rich-text>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            content: '<div class="simgahead"><div class="simgaheadleft"><img class="simgaheadleftimg" src="http://l.guangdiu.com/2528ecc6ef6e92b62d089f7e7f94d75a.jpg?imageView2/2/w/320/h/320/format/jpg"><div class="simgaheadright"><img class="simgaheadrightimg" src="http://l.guangdiu.com/38c66a012c25774e106e81b653f00dd8.jpg?imageView2/2/w/320/h/320/format/jpg"></div></div><p itemprop="description">京东该商品参加满1000减50元优惠券的促销活动，当前到手价1248.00元，附有额外赠品：中柏EZpad8 10.1英寸原装磁吸键盘笔记本底座 巧克力键帽 一体式触控板 带转轴 适合膝上使用*1，降价前售价为1308.00元，本次降幅5%，与上次爆料价相等。喜欢的朋友们不要错过~</p><p itemprop="description">叠加优惠券：<a target="_blank" href="https://guangdiu.com/to.php?u=http%3A%2F%2Fcoupon.jd.com%2Filink%2FcouponActiveFront%2FlinkKey%2Ffront_index.action%3FlinkKey%3DAAROH_xIpeffAs_-naABEFoeFzdarNyjx0-Qi4GiLaXxJPZ8h5CcJDbBiWfOAgOvrsGdkn-Lpn_C1mz1wfuP-xaTdSsE6g%26to%3Dwww.jd.com">满1000减50元优惠券</a></p>'
        }
    },
}
</script>
<style lang="scss">
.content {
    font-size: 29rpx;
    line-height: 160%;
    padding: 21rpx 31rpx 59rpx 31rpx;
    color: #48494d;
    .rich-text {
        width: 100%;
        a {
            color: #5db95b;
        }
        img {
            width: 100%;
            background-color: #F9F9F9;
        }
    }
}
</style>

看截图就知道了， css有加上data-v-xxx 的属性，但是html标签却没有，导致样式表应用不上，app端不会

项目	信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	10
HBuilderX类型	正式
HBuilderX版本号	3.4.7
手机系统	Android
手机系统版本号	Android 10
手机厂商	小米
手机机型	红米k40 游戏增强版
页面类型	vue
vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

h691938207 1楼

问题复现，已反馈给相关人员排查，已加分，感谢反馈！

sinazl 2楼

你好，我反馈了一个bug，你看一下 https://ask.dcloud.net.cn/question/145878

sinazl 3楼

可以先在样式前使用 /deep/ 。预计下版修复

yuanlaile 4楼

alpha 3.4.10 已修复

phonegap100 5楼

你好，我反馈了另一个bug，你看一下 https://ask.dcloud.net.cn/question/145878

ionicwang 6楼

在使用 uni-app 的 rich-text 组件时，H5 端部分标签不会自动加上 data-v-xxxx 属性，这通常是由于 rich-text 组件的实现机制导致的。rich-text 组件在 H5 端会将 HTML 字符串直接渲染到页面上，而不会经过 Vue 的模板编译过程，因此不会自动加上 data-v-xxxx 属性。

解决方案

手动添加 data-v-xxxx 属性：如果你需要为某些标签手动添加 data-v-xxxx 属性，可以在生成 HTML 字符串时手动添加。例如：
```
const htmlContent = `<div data-v-xxxx>你的内容</div>`;
```
使用 scoped 样式：如果你希望在 rich-text 中使用 scoped 样式，可以考虑将样式直接内联到 HTML 中，或者使用全局样式。
使用 v-html 指令：如果你不需要 rich-text 组件的特定功能，可以考虑使用 v-html 指令来渲染 HTML 内容。v-html 会将 HTML 字符串直接插入到 DOM 中，但同样不会自动加上 data-v-xxxx 属性。
```
<div v-html="htmlContent"></div>
```
自定义组件：如果你需要更复杂的控制，可以考虑自定义一个组件来替代 rich-text，并在组件内部手动处理 HTML 内容的渲染和样式的应用。

示例

<template>
  <view>
    <rich-text :nodes="htmlContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: `<div data-v-xxxx>你的内容</div>`
    };
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>