跨团队组件库中HTML标签样式属性冲突隔离设计规范

使用 class="btn" 导致样式冲突的根本原因，在于它直接暴露在全局作用域中。而 data-component="button" 这类属性本质上只是一个标记，并非隔离开关——它自身不会执行任何样式隔离操作。要实现真正的隔离，必须依赖“构建前缀 + 运行时注入 + 工具链”三者的协同配合，缺一不可。

为什么 class="btn" 会引发冲突，而 data-component="button" 并不会自动隔离

data-* 属性本身并不参与 CSS 的作用域控制，它仅仅是一个自定义标记，并非隔离机制。当你书写 div[data-component="button"] .btn 时，如果子组件内部的所有 CSS 并未被重写为带此前缀的版本，那么该选择器实际上与裸写无异。例如 Ant Design 这类第三方 UI 库，其内部的 .ant-btn 完全忽略你的 data-component，依然全局生效。

常见的错误场景包括：

• 主应用定义了 [data-team="a"] .modal，但子应用直接使用了 .ant-modal，样式穿透依然发生。
• 团队 A 的组件采用 data-app="shop"，团队 B 也使用了同名的 data-app，属性值发生冲突，导致选择器失效。
• 构建时没有配置 PostCSS 插件，虽然在 HTML 中正确添加了 data-component，但 CSS 文件中仍然是裸写的 .btn。

CSS Modules 和 Scoped Style 的实际落地条件

Vue 的