class/id/data-*在组件库中天然不隔离，因其仅为DOM属性，无内置作用域机制；样式冲突由加载顺序、选择器权重和 specificity 决定，真正隔离需依赖 Shadow DOM、构建时重写或 iframe 等主动机制。
跨团队组件库中，HTML 标签样式不会自动隔离，class、id、data-* 这些属性本身不带作用域，谁先加载、谁权重高、谁写得更具体，谁就赢——没有默认“安全区”。
为什么 class/id/data-* 在组件库中天然不隔离
它们只是 DOM 属性，浏览器不按团队、项目或 npm 包做选择器分组。一个 Button 组件用了 class="btn"，另一个团队的 Modal 也用 class="btn"，只要 CSS 规则没加前缀或没进 Shadow DOM，就会互相覆盖。
-
class="btn"是全局语义，不是“我的 btn”，哪怕它来自@org/ui包 -
id="submit"在页面里必须唯一，但多个组件实例同时渲染时极易重复，getElementById只返回第一个 -
data-component="button"看似区分了用途，但它只用于 JS 查询或 CSS 选择器前缀，不改变样式作用域——[data-component="button"] .icon仍可能被外部.icon覆盖
真正起效的隔离手段只有三种，且不能混用错位
靠命名约定（如 BEM）或构建插件加哈希后缀，只能防 class 名撞车，挡不住标签选择器、属性选择器或 !important；而 Shadow DOM 是唯一浏览器原生支持的双向隔离机制。
- Shadow DOM：用
element.attachShadow({ mode: 'open' })创建独立样式上下文，内部<style></style>不影响外部，外部规则也无法穿透（除非用:host或::slotted()） - iframe：完全隔离，但开销大、通信难、SEO 差，仅适合强边界场景（如嵌入第三方表单），不适合常规 UI 组件
- 构建时作用域重写：PostCSS 插件（如
postcss-css-namespace）把.btn编译成[data-ui-version="2.4.0"] .btn，但要求所有团队共用同一套配置，且对@import、url()引用的资源无效
data-* 属性在跨团队协作中的真实定位
它不是隔离开关，而是运行时标记载体——只在你主动配合构建或运行时逻辑时才生效。比如 qiankun 的 strictStyleIsolation: true 会在容器上加 data-qiankun="sub-app-a"，再重写所有 CSS 规则；但你手动写的 data-team="marketing"，若没配套的样式重写流程，就只是个注释。
立即学习“前端免费学习笔记（深入）”；
- 安全用法：驱动初始化分支，如
document.querySelectorAll('[data-init="chart"]')触发对应图表加载逻辑 - 危险用法：把
data-theme="dark"当作主题状态源，却不监听变更、也不用 MutationObserver 同步样式——值变了，样式没变 - 命名必须带上下文：
data-api-source="user/profile"比data-id="123"可维护得多，否则三个月后没人知道这个 ID 是用户还是订单
组件库发布时最容易被忽略的样式出口问题
很多团队导出组件时只管 JS 和 HTML 结构，却忘了样式是否真正“附着”在组件实例上。纯 CSS 文件导入后是全局生效的；而 Shadow DOM 内部样式必须通过 shadowRoot.appendChild(styleEl) 或 adoptedStyleSheets 注入，否则等于没写。
- 错误：在组件类里写
this.shadowRoot.innerHTML = '<div></div> <style>.btn { color: blue }</style>'——<style></style>被当普通 HTML 解析，不进 CSSOM，动态改色失效 - 正确：用
const style = document.createElement('style'); style.textContent = '.btn { color: blue }'; this.shadowRoot.appendChild(style) - 兼容性注意：
adoptedStyleSheets在 Safari 16.4+、Chrome 73+ 才稳定，老版本需回退到appendChild方式
