【报Bug】淘宝小程序样式错判 styleIsolation

作为 DCloud 官方人员，对该 bug 反馈进行评审如下：

评审意见

该反馈涉及淘宝小程序样式隔离（styleIsolation）配置在线上环境失效的问题，但当前反馈信息不足以支撑技术团队进行问题定位和复现，需要补充关键信息。

1. 内容完整性评估

缺陷与不足：

• 代码示例不完整：仅提供了 manifest.json 的配置片段，缺少关键的组件源码（Vue 单文件组件）、样式文件（.css/.scss）以及编译后生成的 axml/acss 文件内容。无法验证组件层级结构和样式作用域的实际表现。

• 复现步骤过于简化："小程序打包" 这一描述无法指导技术团队复现问题。需要明确：

  • 是开发工具预览正常，仅线上体验版/正式版异常？
  • 具体涉及哪些组件（自定义组件？页面组件？）？
  • 样式错乱的具体表现（样式未生效？被覆盖？全局污染？）

• 关键环境信息缺失：

  • Vue 版本（Vue2 还是 Vue3？）
  • 淘宝小程序基础库版本（客户端版本号）
  • HBuilderX 详细版本号（4.66 之后是否有小版本更新？）
  • 是否使用了 scoped 样式或 CSS 预处理器？

• 技术细节描述模糊：提到 "dom 上没有 data-sa 属性"，但未提供编译后的 wxml/axml 结构对比截图或代码片段，无法确认是编译器未生成属性还是运行时被移除。

2. Bug 成立性判断

查阅知识库，暂未找到关于淘宝小程序 styleIsolation 与 data-sa 属性关联的已知问题记录。

优先知识库中记录的样式隔离相关问题（如 uni-app x 的 class 样式隔离策略问题）与当前反馈的淘宝小程序场景不直接相关。

从配置来看，用户已正确将 styleIsolation 设置为 "shared"（位于 mp-alipay 配置项下，淘宝小程序基于支付宝小程序架构，此配置路径正确），但线上与审核环境表现不一致，这通常指向：

• 淘宝小程序基础库版本差异
• 编译器在构建正式包与预览包时的差异处理
• 淘宝小程序服务端对样式隔离策略的额外处理

3. 建议补充信息

请补充以下内容以便进一步排查：

1. 最小复现项目：提供一个包含 1-2 个简单组件的 demo，能稳定复现样式隔离失效问题
2. 编译产物对比：提供开发环境（正常）与线上环境（异常）的组件 axml 结构对比，特别是 data-sa 属性的存在情况
3. 详细版本信息：
   • Vue 版本（2 或 3）
   • 淘宝客户端版本号
   • 基础库版本号
4. 样式代码示例：展示组件中 <style> 标签的内容，是否使用了 scoped 属性

临时建议：可尝试在页面配置或组件配置中显式添加 "styleIsolation": "shared"（而非仅在 manifest.json 中配置），观察线上环境是否生效。如问题持续，请通过官方 issue 系统提交包含上述补充信息的详细报告。

[知识库暂无相关内容] 关于淘宝小程序 styleIsolation 在线上环境失效的具体技术细节，当前知识库中未找到明确的解决方案或已知问题记录。

hx 升级到最新的版本看看有没有这个问题

<template>
<view class="padding-sm radius-lg bg-white">
<view class="heard flex justify-between align-start">
<view class="text-black text-cut" style="width:65%">XXXX</view>
<view class="text-right">
<view class="text-red text-14">
<text> 取消</text>
</view>
</view>
</view>
<view class="info movie-info margin-bottom padding-top-sm">
<image
src="https://gw.alicdn.com/tfscom/i1/O1CN01IcEMDr29DcqQb7jRe_!!6000000008034-0-alipicbeacon.jpg"
mode="widthFix"
/>
<view class="margin-left-sm text-sm">
<view class="text-black text-bold text-cut text-df" style="width: 80%;">
电影名
</view>
<view class="margin-top-xs">
时间
</view>
<view class="margin-top-xs">厅</view>
<view class="margin-top-xs">
座位
</view>
</view>
<view class="flex align-center text-xxl text-right flex-end" style="color:#BFBFBF">
<text class="cuIcon-roundright "></text>
</view>
</view>
<view
class="flex align-center padding-lr-sm total padding-top-sm justify-between text-black"

</view>
</view>
</template>
<script>

</script>
<style scoped>
.text-14{
font-size: 28rpx;
}
.movie-info{
background-color: #fff;
display: grid;
grid-template-columns: 20% 65% 15%;
}
.flex-end{
justify-content: flex-end;
}
.total {
border-top: 4rpx dashed #dedede;
}
.bg-icon {
background-color: #ff9f34;
color: #fff;
margin-right: 10rpx;
padding: 5rpx;
font-size: 16rpx;
border-radius: 5rpx;
}
</style>
其中一个小卡片组件