HTML标准不一致会引发微前端样式/行为异常，因qiankun严格样式隔离依赖统一DOM结构，Vue ID冲突、非标准HTML导致解析失败；需用html-validate统一属性顺序并集成lint，禁止子应用操作document.head，构建时注入data-app标识并确保与qiankun注册名一致。
为什么 HTML 标准不一致会引发微前端样式/行为异常
基座和子应用用不同 HTML 规范（比如一个用 class="btn-primary"，另一个用 class="primary-btn"；或一个省略 alt，另一个强制要求），表面只是格式问题，实际会触发链式故障：qiankun 的 strictStyleIsolation 依赖统一的 DOM 结构做选择器重写，若子应用生成的 <img alt="解决微前端基座与子应用HTML代码质量标准不一致冲突" > 没带 data-qiankun 属性前缀，重写规则就漏匹配；Vue 子应用若在模板里写 <div id="header"></div>，而基座也用了相同 id，CSS 或 JS 查询时直接冲突；更隐蔽的是，Umi 或 qiankun 的沙箱在解析 HTML 字符串时，会依赖标准的标签闭合和属性语法，非标准写法（如未引号的 class=btn）可能被 DOMParser 解析失败，导致 adoptedStyleSheets 注入中断。
用 code-guide 统一 HTML 语法与属性顺序
不要靠人工 review 或口头约定——把 code-guide 集成进 lint 流程才是硬约束。它定义的属性顺序（class → id → data-* → src → title）能确保所有子应用生成的 DOM 节点结构可预测，这对 qiankun 动态注入 data-qiankun 前缀、PostCSS 插件重写选择器都至关重要。
- 在基座和所有子应用的
package.json中添加："devDependencies": { "html-validate": "^7.0.0" } - 新建
.htmlvalidate.json，内容为：{ "extends": ["html-validate:recommended"], "rules": { "attr-order": ["error", { "order": ["class", "id", "data-*", "src", "href", "value", "title", "alt", "role", "aria-*"] }], "no-inline-style": "error", "require-alt": "error" } } - CI 中加入：
npx html-validate src/**/*.html src/**/*.vue src/**/*.tsx，失败则阻断发布
禁止子应用操作全局 document.head 和内联脚本
子应用在 mount 阶段执行 document.head.appendChild(styleEl) 或写 <script>console.log()</script> 到 index.html，会绕过 qiankun 的样式隔离机制，且破坏基座对 的统一管控。这类代码在独立运行时正常，嵌入后却污染全局。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Webpack 子应用：检查
html-webpack-plugin的template是否含内联<script></script>或<style></style>，全部移至外部文件 - Vite 子应用：禁用
index.html中除<title></title>和基础 meta 外的一切标签，所有资源通过import或useEffect动态加载 - 基座侧加运行时防护：
const originalAppendChild = document.head.appendChild; document.head.appendChild = function(child) { if (child.tagName === 'STYLE' || child.tagName === 'LINK') { console.warn('Sub-app tried to inject global style - blocked'); return null; } return originalAppendChild.call(this, child); };
构建时注入应用标识，让 data- 属性真正参与隔离
只写 data-app="order" 不够——必须确保这个属性被工具链识别并用于 CSS 重写、JS 作用域绑定、资源路径修正。手动写的 data- 若没接入构建流程，就是装饰性字段。
立即学习“前端免费学习笔记（深入）”；
- 子应用构建配置中，向
html-webpack-plugin或vite-plugin-html传入：appIdentifier: process.env.MICRO_APP_NAME || 'default' - PostCSS 配置启用
postcss-css-namespace，并设namespace: '[data-app="' + appIdentifier + '"] ' - qiankun
registerMicroApps中的name字段必须与MICRO_APP_NAME完全一致，否则window.__POWERED_BY_QIANKUN__环境下publicPath和data-前缀无法对齐
最易忽略的是：HTML 属性顺序和 data- 注入必须在构建产物阶段完成，而不是运行时 JS 拼接——后者无法被 PostCSS 或沙箱解析器捕获，等于没隔离。
