如何在Vite中为Shadow DOM注入CSS？（React项目场景）

你的Vite+React应用已经在Shadow DOM中构建，但CSS仍被自动插入到页面head标签，现有插件无法满足需求，这里提供两种可行的Vite端解决方案：

方案一：自定义Vite插件实现CSS注入控制 #

通过编写简单的自定义插件，拦截Vite对CSS的默认处理，将CSS转为字符串模块导出，再在应用初始化时手动注入到Shadow DOM中。

步骤1：修改Vite配置 #

在原配置中添加自定义插件，并禁用默认的CSS代码分割：

import react from '@vitejs/plugin-react';
import * as path from 'path';
import { defineConfig, splitVendorChunkPlugin } from 'vite';
import htmlPlugin from 'vite-plugin-html-config';
import { dependencies } from './package.json';

const exclVendors = ['react', 'react-router-dom', 'react-dom'];
function renderChunks(deps: Record<string, string>) {
  let chunks = {};
  Object.keys(deps).forEach((key) => {
    if (exclVendors.includes(key)) return;
    chunks[key] = [key];
  });
  return chunks;
}

// 自定义插件：拦截CSS输出为字符串模块
const cssInShadowDomPlugin = () => {
  return {
    name: 'css-in-shadow-dom',
    transform(code, id) {
      // 处理全局CSS和预处理器文件
      if (id.endsWith('.css') || id.endsWith('.scss') || id.endsWith('.less')) {
        // 转义反引号，避免模板字符串语法错误
        return `export default \`${code.replace(/`/g, '\\`')}\``;
      }
      // 处理CSS Modules，保留类名导出同时提取样式内容
      else if (id.includes('.module.css')) {
        const cssContent = code.replace(/`/g, '\\`');
        return `
          export const css = \`${cssContent}\`;
          ${code}
        `;
      }
    },
  };
};

export default defineConfig({
  server: {
    port: 8082
  },
  envPrefix: 'APP_',
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
  plugins: [
    react(),
    htmlPlugin({ favicon: './src/assets/logo.svg' }),
    splitVendorChunkPlugin(),
    cssInShadowDomPlugin(), // 启用自定义插件
  ],
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          ...renderChunks(dependencies),
        },
      },
      cssCodeSplit: false, // 禁用默认CSS分割，统一处理样式
    },
  },
});

步骤2：在应用入口注入CSS到Shadow DOM #

修改main.tsx（或入口文件），在创建Shadow DOM后将所有导入的CSS注入进去：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 导入全局CSS
import globalCss from './index.css';
// 导入CSS Modules（如果有）
import { css as appModuleCss, styles } from './App.module.css';

// 获取根容器并创建Shadow DOM
const rootContainer = document.getElementById('root');
const shadowRoot = rootContainer.attachShadow({ mode: 'open' });

// 创建style元素并合并所有CSS内容
const styleEl = document.createElement('style');
styleEl.textContent = `${globalCss}${appModuleCss}`;
shadowRoot.appendChild(styleEl);

// 在Shadow DOM中渲染React应用
ReactDOM.createRoot(shadowRoot).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

方案二：调整现有插件配置（针对vite-plugin-css-injected-by-js） #

如果你仍想使用vite-plugin-css-injected-by-js，可以通过插件的自定义注入函数指定Shadow DOM作为目标：

// 在Vite配置的plugins中修改插件初始化
cssInjectedByJsPlugin({
  injectCode: (css) => {
    // 定位到你的Shadow DOM根节点
    const shadowRoot = document.getElementById('root').shadowRoot;
    if (shadowRoot) {
      const style = document.createElement('style');
      style.innerHTML = css;
      shadowRoot.appendChild(style);
    }
  },
})

注意：这种方式需要确保Shadow DOM在CSS注入前已经创建，可能需要调整应用初始化顺序。

对比你的esbuild解决方案 #

你的esbuild配置通过cssModulesPlugin的inject: 'body'参数实现样式注入位置控制，Vite中的核心思路一致：通过拦截CSS输出，由JS逻辑控制将样式插入到指定的Shadow DOM容器中，而非默认的head标签。

内容的提问来源于stack exchange，提问作者Sergey