如何修改#shadow-root (open)中特定元素的CSS样式？

• 普通document.querySelector无法直接定位Shadow Root内部元素，必须先找到Shadow Root的宿主元素，再通过宿主的shadowRoot属性进入Shadow DOM内部查询目标元素：

  // 替换成实际的宿主元素选择器（比如第三方组件的类名/ID）
  const hostElement = document.querySelector('.third-party-host');
  if (hostElement?.shadowRoot) {
    const targetElement = hostElement.shadowRoot.querySelector('.element');
    if (targetElement) {
      targetElement.style.display = 'none';
    }
  }
  

• 若执行代码时第三方脚本还未生成Shadow Root，会出现宿主元素或shadowRoot为null的情况，此时可通过MutationObserver监听Shadow Root的生成：

  const hostSelector = '.third-party-host';
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const hostElement = document.querySelector(hostSelector);
      if (hostElement?.shadowRoot) {
        const targetElement = hostElement.shadowRoot.querySelector('.element');
        if (targetElement) {
          targetElement.style.display = 'none';
          observer.disconnect(); // 找到元素后停止监听，避免重复执行
        }
      }
    });
  });
  
  // 监听整个文档的子元素变化，确保捕获到宿主元素的加载
  observer.observe(document.body, { childList: true, subtree: true });
  

• 针对简单场景，也可以用延迟重试的方式（适合第三方脚本加载速度较慢的情况）：

  function hideTargetElement() {
    const targetElement = document.querySelector('.third-party-host')?.shadowRoot?.querySelector('.element');
    if (targetElement) {
      targetElement.style.display = 'none';
    } else {
      setTimeout(hideTargetElement, 500); // 每隔500ms重试一次，直到找到元素
    }
  }
  
  // 页面完全加载后启动重试逻辑
  window.addEventListener('load', hideTargetElement);
  

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