Qiankun 是一个流行的微前端框架，它提供了一种用于实现独立 CSS 隔离的机制。该机制被称为 “CSS in JS isolation”，它通过在应用程序的不同微前端模块之间动态创建 <style> 标签来实现隔离的 CSS。

我们来看一个使用 qiankun 进行 CSS 隔离的示例：

1. 在微前端的主应用中，你需要在注册微应用时，通过 cssIsolation 参数来启用 CSS 隔离：

import { registerMicroApps, start } from "qiankun";

registerMicroApps([
  {
    name: "micro-app",
    entry: "http://localhost:3001",
    container: "#micro-app-container",
    activeRule: "/micro-app",
    props: {
      cssIsolation: true,
    },
  },
]);

start();

2. 在微应用中，你可以使用乾坤提供的 useCssLoader 钩子来加载和隔离 CSS：

import { useCssLoader } from "qiankun";

// 在组件中使用 useCssLoader 加载 CSS
const MyComponent = () => {
  useCssLoader();

  return <div>Micro App Content</div>;
};

通过使用以上代码，乾坤会在微应用渲染时动态创建和加载 CSS，并将其隔离在 <style> 标签中。这样可以确保微应用之间的 CSS 类名和样式不会相互干扰，实现了独立的 CSS 隔离。

需要注意的是，乾坤的 CSS 隔离机制仅适用于各个微应用之间的隔离，而不会影响主应用的 CSS。主应用的 CSS 仍然会影响整个页面，因此在设计主应用的样式时需要注意不要与微应用产生冲突。

在乾坤框架中，使用 useCssLoader 钩子后，乾坤会在微应用的渲染过程中动态创建 DOM 元素和 <style> 标签，并将微应用的 CSS 内容插入到这个标签中。下面是具体的 DOM 结构示例：

<div id="micro-app-container">
  <!-- 微应用的其他内容 -->
</div>
<style type="text/css">
  /* 微应用的 CSS 内容 */
</style>

在上面的示例中，<div> 标签具有 id 属性为 “micro-app-container”，它是微应用的容器。乾坤会将微应用的其他内容渲染在这个容器中。

同时，乾坤会在 <style> 标签中插入微应用的 CSS 内容。这些 CSS 规则将仅适用于 <div id="micro-app-container"> 内部的内容，而不会影响其他部分的页面。

通过动态创建和插入这个 <style> 标签，乾坤实现了微应用之间的 CSS 隔离。每个微应用的 CSS 规则仅对应该微应用内的 DOM 元素生效，从而确保微应用之间的样式不会互相冲突。

#micro-app-container .example-container {
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #ddd;
}

#micro-app-container .example-container h1 {
  color: #333;
  font-size: 20px;
}

#micro-app-container .example-container p {
  color: #666;
  font-size: 16px;
}

需要注意的是，以上只是一个示例 DOM 结构，实际的 DOM 结构和样式标签的插入方式可能会因乾坤版本或配置的不同而有所差异。但整体原理是相似的：乾坤会创建一个用于包裹微应用内容的容器，并在其中动态插入隔离的 CSS。