如何修改Webpack style-loader的insert方法注入样式到Shadow DOM

你的核心问题是样式加载时机与ShadowRoot创建时机不匹配：你在content/index.tsx顶部同步导入了CSS文件，这会触发style-loader在init()函数执行前就尝试插入样式标签，但此时你还没创建ShadowRoot，所以insert函数找不到目标，只能 fallback 到默认的document.head。

解决步骤 #

1. 调整CSS加载时机（推荐方案）

将同步导入CSS改为动态导入，确保ShadowRoot创建完成后再加载样式：

修改content/index.tsx：

import React from "react";
import { createRoot } from "react-dom/client";
import ActiveTabContextProvider from "../context/ActiveTabContextProvider";
import Content from "./content";

// 删掉顶部的同步import，改为动态导入
function init() {
    const appContainer = document.createElement('div')
    appContainer.id = "shadow-root-parent";
    const shadowRoot = appContainer.attachShadow({ mode: 'open' });
    document.body.appendChild(appContainer);
    
    // 动态导入CSS，此时ShadowRoot已存在
    import('../assets/tailwind.css').then(() => {
        const root = createRoot(shadowRoot);
        root.render(
            <React.StrictMode>
                <ActiveTabContextProvider>
                    <Content />
                </ActiveTabContextProvider>
            </React.StrictMode>
        );
    });
}

init();

2. 修改style-loader的insert配置

让insert函数直接定位到你创建的ShadowRoot：

更新webpack配置中style-loader的options：

{
  loader: 'style-loader',
  options: {
    insert: function insertIntoShadowRoot(element) {
      // 直接查找已创建的ShadowRoot
      const shadowRoot = document.getElementById('shadow-root-parent')?.shadowRoot;
      if (shadowRoot) {
        shadowRoot.appendChild(element);
      } else {
        // 降级处理，避免样式丢失
        document.head.appendChild(element);
      }
    },
  }
}

备选方案（不推荐，仅作补充） #

如果不想用动态导入，可以在insert函数中加入轮询，等待ShadowRoot创建完成：

{
  loader: 'style-loader',
  options: {
    insert: function insertIntoShadowRoot(element) {
      function waitForShadowRoot() {
        const shadowRoot = document.getElementById('shadow-root-parent')?.shadowRoot;
        if (shadowRoot) {
          shadowRoot.appendChild(element);
        } else {
          setTimeout(waitForShadowRoot, 50);
        }
      }
      waitForShadowRoot();
    },
  }
}

关键说明 #

• 不需要给insert函数传递额外参数，insert函数运行在浏览器环境中，直接通过DOM API查找目标即可。
• 必须保证ShadowRoot的mode为open，否则无法通过外部JS访问到它。
• 动态导入的方式更可靠，能彻底避免时机不匹配的问题，是优先推荐的方案。

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