如何将SCSS注入Shadow DOM

兄弟我太懂你这种糟心的处境了——用Module Federation拆了React项目，本来想靠Shadow DOM把远程组件的样式彻底隔离，结果主项目的CSS照样乱串，自己写的SCSS还死活进不去Shadow根里，折腾半天头都大了！正好我之前用CRA+CRACO踩过一模一样的坑，给你分享几个实测有效的办法：

第一步：先搞懂Shadow DOM的样式逻辑 #

Shadow DOM是个独立的样式沙箱，页面全局的样式（包括主项目的CSS）默认渗透不进去，但你自己的SCSS也一样——因为CRA默认会把SCSS编译成全局样式塞进页面的<head>里，根本没进到Shadow根里。所以核心思路就是：把SCSS编译成CSS字符串，手动插入到Shadow根的<style>标签里。

第二步：调整CRACO配置，让SCSS能导出成字符串 #

CRA默认的webpack配置会把SCSS处理成全局样式，我们得加个规则，让特定的SCSS文件能被当作字符串导入。修改你的craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 给要注入Shadow的SCSS文件单独加规则，约定用.shadow.scss后缀区分
      webpackConfig.module.rules.push({
        test: /\.shadow\.scss$/,
        use: [
          'raw-loader', // 把编译后的CSS转成字符串
          'sass-loader', // 先把SCSS编译成普通CSS
        ],
      });
      // 记得先装raw-loader：npm install raw-loader --save-dev
      return webpackConfig;
    },
  },
};

第三步：在组件里封装Shadow根+注入样式 #

这里有两种写法，选你顺手的来：

写法1：原生DOM操作包裹 #

适合简单组件，直接创建Shadow根然后塞内容和样式：

import React, { useEffect, useRef } from 'react';
// 导入编译好的CSS字符串（注意文件后缀是.shadow.scss）
const componentStyles = require('./YourRemoteComponent.shadow.scss');

const ShadowIsolatedComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && !containerRef.current.shadowRoot) {
      // 创建开放模式的Shadow根，方便调试
      const shadowRoot = containerRef.current.attachShadow({ mode: 'open' });
      
      // 1. 先把样式塞进Shadow根
      const styleEl = document.createElement('style');
      styleEl.textContent = componentStyles;
      shadowRoot.appendChild(styleEl);

      // 2. 再把组件内容塞进Shadow根
      const componentContent = document.createElement('div');
      componentContent.innerHTML = `
        <div class="remote-component-header">
          <h2>我是被隔离的远程组件</h2>
          <p>这部分样式完全不受主项目影响</p>
        </div>
      `;
      shadowRoot.appendChild(componentContent);
    }
  }, []);

  return <div ref={containerRef}></div>;
};

export default ShadowIsolatedComponent;

写法2：React Portal渲染（更符合React习惯） #

如果你的组件逻辑复杂，用Portal把React元素直接渲染到Shadow根里，不用写innerHTML：

import React, { useEffect, useRef, createPortal } from 'react';
const componentStyles = require('./YourRemoteComponent.shadow.scss');

const ShadowIsolatedComponent = () => {
  const containerRef = useRef(null);
  const shadowRootRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && !shadowRootRef.current) {
      // 创建Shadow根
      shadowRootRef.current = containerRef.current.attachShadow({ mode: 'open' });
      // 插入样式
      const styleEl = document.createElement('style');
      styleEl.textContent = componentStyles;
      shadowRootRef.current.appendChild(styleEl);
    }
  }, []);

  // 等Shadow根创建好再渲染内容
  if (!shadowRootRef.current) return null;

  return (
    <div ref={containerRef}>
      {createPortal(
        <div className="remote-component-header">
          <h2>用Portal渲染的隔离组件</h2>
          <p>React的状态、事件都能正常用</p>
        </div>,
        shadowRootRef.current
      )}
    </div>
  );
};

export default ShadowIsolatedComponent;

几个要注意的小细节 #

• 你的SCSS里尽量别用全局选择器（比如body、html），Shadow DOM的“全局”是它自己的根节点，和页面的根不搭边。
• 用.shadow.scss后缀的文件只用来写当前组件的隔离样式，别和全局SCSS混着用，避免冲突。
• 如果用了CSS Modules，其实可以直接把Modules导出的样式对象转成字符串注入，不过用上面的raw-loader方式更直接。

这样折腾完，你的远程组件样式就彻底被Shadow DOM兜住了，主项目的CSS再怎么浪也影响不到它，完美解决Module Federation的样式串扰问题！

内容来源于stack exchange