data-*属性本身不提供样式隔离，仅作为选择器前缀载体；真正隔离需结合构建时前缀、运行时注入及Shadow DOM等协同机制。
微前端里用 class、id、data-* 这类 HTML 全局属性本身不解决样式隔离——它们只是选择器载体，冲突与否取决于 CSS 作用域和加载方式。
为什么 data-* 属性不能自动隔离样式
data- 属性常被误认为“天然隔离”，其实它只是给选择器加前缀的手段，真正起作用的是你是否把样式限定在特定上下文里。比如：
- 写
div[data-app="a"] .btn { color: red }，但没确保所有子应用样式都加了这个前缀，就等于没隔离 - 子应用用了第三方库（如 Ant Design），它的
.ant-btn仍会全局生效，data-属性对它无效 - 父应用写了
[data-theme="dark"] .btn，而子应用也用了.btn，照样被穿透影响
customElements.define() + data-* 不等于 Shadow DOM 隔离
只注册自定义标签、不调用 attachShadow()，data- 属性和普通 div 没区别——DOM 还在 light DOM 里，所有样式规则照常级联。
- 错误写法：
customElements.define('my-app', class extends HTMLElement {})，没在constructor中调用this.attachShadow({ mode: 'closed' }) - 后果：外部
.header、body * { font-size: 14px }全部穿透进来 - 即使你在模板里写
<div data-subapp="b"></div>，也无法阻止 normalize.css 重置全局body字体大小
data-* 在 qiankun 或 MicroApp 中的实际用途
它主要被框架用作运行时样式作用域标记，不是开发者手动写的“隔离开关”。
立即学习“前端免费学习笔记（深入）”；
-
qiankun的strictStyleIsolation: true会在容器上加类似data-qiankun="sub-app-a"的属性，然后重写所有 CSS 规则为[data-qiankun="sub-app-a"] .btn -
MicroApp直接用<micro-app name="xxx"></micro-app>标签作为选择器前缀，等价于自动包裹一层micro-app[name="xxx"] - 你手动加的
data-属性，若没配合构建时重写或运行时注入，基本不参与隔离逻辑
真正起效的组合：data-* + 构建时前缀 + 运行时注入
单独靠 HTML 属性不行，必须和工具链协同才能落地。
- PostCSS 插件（如
postcss-css-namespace）可将.btn编译为[data-app="a"] .btn，但需确保所有子应用共用同一套配置 - qiankun 的
experimentalStyleIsolation: true会在挂载时动态改写 style 标签内容，把.modal变成[data-qiankun="xxx"] .modal - 如果子应用用了
@import或url()引用字体/图片，前缀方案可能漏掉这些资源路径，得额外处理
最硬核的隔离点还是 attachShadow({ mode: 'closed' }) —— 它让 data- 属性彻底失去穿透能力，但代价是弹窗、Tooltip 等需脱离 shadowRoot 渲染，这点容易被忽略。
