Next.js中如何等待ShadowRoot组件渲染后修改样式？

我使用一个会创建Shadow DOM的库组件，想要修改其中.change-me类的颜色。该组件在DOM中生成的结构如下：

<custom-lib ...>
   #shadow-root(open)
      <style>
         ...
      </style>
      <div class="change-me">
         ...
      </div>
</custom-lib>

我当前在组件中编写的代码如下：

...
  const customLib = document.querySelector('custom-form');

  useEffect(() => {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(".change-me { color: red }");
    customLib?.shadowRoot?.adoptedStyleSheets.push(sheet);
  }, [customLib]);
  ...

但结果是customLib或customLib.shadowRoot为null，导致样式无法生效。我尝试过将[customLib, customLib?.customLib]作为依赖数组，结果依旧。请问如何等待该组件及ShadowRoot渲染完成后再应用CSS修改？

首先注意：你代码里的选择器是custom-form，但DOM结构中是<custom-lib>，这大概率是笔误，先修正为匹配的选择器，否则第一步就找不到目标元素。

以下是几种可靠的解决方案：

1. 用MutationObserver监听ShadowRoot生成 #

通过监听目标元素的变化，等待ShadowRoot出现后立即注入样式：

useEffect(() => {
  const target = document.querySelector('custom-lib');
  if (!target) return;

  const observer = new MutationObserver(() => {
    if (target.shadowRoot) {
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(".change-me { color: red }");
      target.shadowRoot.adoptedStyleSheets.push(sheet);
      observer.disconnect(); // 完成后停止监听，避免重复执行
    }
  });

  // 监听目标元素的属性、子节点变化
  observer.observe(target, { attributes: true, childList: true, subtree: true });

  // 组件卸载时清理监听
  return () => observer.disconnect();
}, []);

2. 轮询检查ShadowRoot状态 #

如果MutationObserver不适用，可以用定时器轮询，直到ShadowRoot存在：

useEffect(() => {
  const applyStyle = () => {
    const customLib = document.querySelector('custom-lib');
    if (customLib?.shadowRoot) {
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(".change-me { color: red }");
      customLib.shadowRoot.adoptedStyleSheets.push(sheet);
      return true;
    }
    return false;
  };

  // 先立即检查一次
  if (!applyStyle()) {
    const interval = setInterval(() => {
      if (applyStyle()) {
        clearInterval(interval);
      }
    }, 100); // 每隔100ms检查一次，可根据需求调整间隔

    // 组件卸载时清理定时器
    return () => clearInterval(interval);
  }
}, []);

3. 利用自定义元素的定义事件 #

如果目标是自定义元素，可以监听它的定义完成事件，确保元素已初始化：

useEffect(() => {
  const handleReady = () => {
    const customLib = document.querySelector('custom-lib');
    if (customLib?.shadowRoot) {
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(".change-me { color: red }");
      customLib.shadowRoot.adoptedStyleSheets.push(sheet);
    }
  };

  // 检查元素是否已定义
  if (customElements.get('custom-lib')) {
    handleReady();
  } else {
    // 等待元素定义完成
    customElements.whenDefined('custom-lib').then(handleReady);
  }

  // 部分库会触发自定义就绪事件，可额外监听
  window.addEventListener('custom-lib-ready', handleReady);
  return () => window.removeEventListener('custom-lib-ready', handleReady);
}, []);

关键注意点 #

• 确保ShadowRoot是open状态：如果是closed状态，外部无法直接访问，只能通过组件库提供的API或配置修改样式。
• 避免内存泄漏：所有监听和定时器都要在组件卸载时清理。

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