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

样式冲突源于class暴露在全局作用域。隔离需依赖构建前缀、运行时注入与工具链协同，而非仅靠data-属性。常见问题包括CSSModules脱离构建失效、ShadowDOM破坏第三方库兼容性。建议统一团队前缀、配置PostCSS白名单并清除全局通配规则。

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

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

为什么 `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 的