主应用通过遍历 document.head 下的 <link> 元素，利用自定义属性（如 data-app-id）精准定位并移除属于特定微应用的样式表。在卸载微应用前，先筛选出带有该标识的节点，将其从 dom 中移除以立即停止样式渲染，随后删除对应的缓存或标记，确保下次加载时能重新注入。
如何识别并移除指定微应用的CSS文件
通过检查 <link> 标签上的 data-app-id 属性来识别属于当前微应用的 CSS 文件。找到匹配项后，直接调用 node.remove() 将其从 DOM 树中剔除，从而快速清理已注入的全局样式。
function cleanupMicroAppCSS(appId) {
const links = document.querySelectorAll('link[data-app-id="' + appId + '"]');
links.forEach(link => link.remove());
}
如何处理动态加载后的样式残留与冲突
微应用可能通过 JavaScript 动态创建 <style></style> 或 <link> 标签，这些元素同样需要被追踪。除了处理静态 HTML 引入的 CSS，还需监听 DOM 变化或使用沙箱机制记录所有新增的样式节点，确保卸载时能彻底清除，避免样式泄漏到主应用或其他微应用中。
立即学习“前端免费学习笔记（深入）”；
function cleanupAllMicroStyles(appId) {
// 清理 link
const links = document.querySelectorAll('link[data-app-id="' + appId + '"]');
links.forEach(link => link.remove());
// 清理 style
const styles = document.querySelectorAll('style[data-app-id="' + appId + '"]');
styles.forEach(style => style.remove());
}
基于data-app-id属性的具体清理逻辑验证
当 appId 为 micro-app-1 时，系统会精确查找所有带有 data-app-id="micro-app-1" 的 <link> 和 <style></style> 标签。如果某个微应用在运行期间动态插入了一个不带此属性的全局样式，则该样式不会被清理，这要求开发者在微应用开发规范中强制要求使用此属性标记所有样式资源。
