如何将NextJS开发的可嵌入组件挂载到Shadow DOM？

1. 封装Shadow DOM挂载组件 #

先写一个通用的Shadow DOM容器组件，负责创建Shadow根节点并挂载React内容，同时处理组件卸载时的清理逻辑：

import { useEffect, useRef } from 'react';

const ShadowWrapper = ({ children }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 初始化Shadow DOM
    let shadowRoot = containerRef.current.shadowRoot;
    if (!shadowRoot) {
      shadowRoot = containerRef.current.attachShadow({ mode: 'open' });
      // 注入Shadow内部全局样式（可选，用于隔离宿主样式）
      const globalStyle = document.createElement('style');
      globalStyle.textContent = `
        :host { display: block; margin: 0; padding: 0; }
        /* 这里可以添加组件需要的基础样式，避免宿主样式干扰 */
      `;
      shadowRoot.appendChild(globalStyle);
    }

    // 挂载React子组件到Shadow DOM
    import('react-dom/client').then(({ createRoot }) => {
      const root = createRoot(shadowRoot);
      root.render(children);

      // 卸载时清理
      return () => root.unmount();
    });
  }, [children]);

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

export default ShadowWrapper;

2. 包裹你的嵌入组件 #

把需要隔离的滚动组件放到ShadowWrapper里：

import ShadowWrapper from './ShadowWrapper';

export default function EmbeddableScrollWidget() {
  return (
    <ShadowWrapper>
      <div className="scroll-container" style={{ height: '500px', overflowY: 'auto' }}>
        {/* 你的滚动内容，比如长列表、自定义滚动区域 */}
        {Array.from({ length: 50 }).map((_, idx) => (
          <div key={idx} style={{ padding: '1rem', borderBottom: '1px solid #eee' }}>
            滚动项 {idx + 1}
          </div>
        ))}
      </div>
    </ShadowWrapper>
  );
}

3. 适配Next.js的SSR/SSG特性 #

Shadow DOM是浏览器端API，无法在服务器渲染阶段运行，所以要确保组件只在客户端挂载：

针对Pages Router：

用dynamic导入并关闭SSR：

import dynamic from 'next/dynamic';

const EmbeddableScrollWidget = dynamic(() => import('./EmbeddableScrollWidget'), {
  ssr: false,
  loading: () => <div>加载中...</div>
});

// 在页面中使用
export default function Home() {
  return <EmbeddableScrollWidget />;
}

针对App Router（Next.js 13+）：

给组件加上'use client'指令，标记为客户端组件：

'use client';

import ShadowWrapper from './ShadowWrapper';

export default function EmbeddableScrollWidget() {
  // ...组件内容
}

4. 滚动功能的注意点 #

因为组件在Shadow DOM内部，滚动事件需要绑定到Shadow内的元素上，而不是全局document：

import { useEffect, useRef } from 'react';

// 在你的滚动组件内部
const ScrollContent = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const handleScroll = (e) => {
      // 处理自定义滚动逻辑，比如监听滚动位置、触发加载更多等
      console.log('Shadow内滚动位置:', e.target.scrollTop);
    };
    scrollRef.current?.addEventListener('scroll', handleScroll);
    return () => scrollRef.current?.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={scrollRef} style={{ height: '500px', overflowY: 'auto' }}>
      {/* 滚动内容 */}
    </div>
  );
};

样式隔离补充 #

Shadow DOM默认会隔离样式，但如果需要继承宿主网站的部分样式，可以用：

• :host伪类：设置Shadow容器本身的样式，支持继承宿主的CSS变量
• ::slotted()：设置通过插槽传入的内容样式

比如：

:host {
  font-family: inherit; /* 继承宿主的字体 */
  color: var(--host-text-color, #333); /* 使用宿主定义的CSS变量 */
}
::slotted(.external-slot) {
  margin: 0 1rem;
}

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