微信小程序scoped样式穿透失效是因原生样式隔离机制拦截，必须用::v-deep(.my-container)或:deep(.my-container)，不可省略括号；ParentComponent需设styleIsolation:'apply-shared'；动态class须加业务前缀。
scoped样式穿透失效，不是你写错了，而是微信小程序的原生样式隔离机制在拦截——必须配合 ::v-deep() 或 :deep() + 明确父类名，且不能漏括号。
为什么 ::v-deep .target 在小程序里完全不生效
微信小程序编译器会直接丢弃无括号的 ::v-deep .target 写法；它只识别带括号的语法，比如 ::v-deep(.my-container)。这是 uni-app 3.x 编译链的硬性规则，不是 Vue 版本兼容问题。
-
::v-deep .my-class→ 被整条忽略，开发者工具里根本看不到这条 CSS -
::v-deep(.my-class)→ 正确，会被编译为可穿透的选择器 -
:deep(.my-class)→ uni-app 3.1+ 推荐写法，语义更清晰，效果等同 - 单独写
::v-deep { view { } }→ 危险！会污染所有页面、弹窗、 tabbar，绝对禁止
组件嵌套组件时 ::v-deep 失效的根本原因
层级是 [Page] → [ParentComponent] → [ChildComponent] 时，ParentComponent 默认启用 isolated 模式，像一堵墙把样式锁死在内部，::v-deep 出不去。
- 解决方案：在
ParentComponent的options中显式设styleIsolation: 'shared'或'apply-shared' -
shared风险高，可能反向污染页面；优先用apply-shared - Vue 3 setup 语法糖中需用
defineOptions({ options: { styleIsolation: 'apply-shared' } }) - 不要在
pages.json或组件.json文件里手动配styleIsolation，会和 scoped 编译打架
动态 class 绑定导致穿透失败的隐藏陷阱
像 :class="['item', isActive ? 'active' : '']" 这种写法，生成的 active 类不会被 scoped 哈希处理——它就是裸奔的全局 class，既不受保护，也无法被 ::v-deep 精准定位。
- 子元素样式无法靠
.active .text触发，nvue 和小程序都认不了这种链式选择器 - 正确做法：把状态样式直接写到子元素上，例如
<text :class="['text', { 'text-active': isActive }]"></text> - 或改用内联
:style，如<text :style="{ color: isActive ? '#007AFF' : '#666' }"></text> - 所有动态 class 名必须加业务前缀（如
pay-active），避免和第三方库冲突
别信“加个 scoped 就万事大吉”
scoped 只是起点，不是终点。真正容易被忽略的是：一旦用了全局标签选择器（如 page、view、scroll-view）作为根节点，就会绕过所有 scoped 保护，直接污染整个页面树。
- 所有
<style scoped></style>必须以明确 class 开头，例如.order-page、.chat-wrapper - 旧项目没加 scoped？别动老代码，新功能一律走
scoped + :deep() + 唯一 class 前缀 - upx 单位比 rpx 更稳，uni-app 3.x 对 upx 的跨端换算已收敛，建议统一替换
- 第三方 UI 库（如 uView、colorUI）未适配小程序 scoped 机制时，
!important是临时兜底手段，不是长期解法
