如何正确访问多层Shadow Root下的chat-wrapper类DOM元素

我需要访问chat-wrapper类元素，对应DOM结构可参考截图：

我已尝试以下方案均未生效：

// 方案1 --> 报错：document.querySelector(...).shadowRoot.querySelector(...).shadowRoot.getElementByClassName is not a function at HTMLElement
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.getElementsByClassName('chat-wrapper')

// 方案2 --> 返回null
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.querySelector('chat-wrapper')

// 方案3 --> 报错：document.querySelector(...).shadowRoot.querySelector(...).shadowRoot.getElementByTagName is not a function at HTMLElement
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.getElementsByTagName('div')

// 方案4 --> 返回undefined
document.querySelector('df-messenger').shadowRoot.querySelector('df-messenger-chat').shadowRoot.div

首先明确原有尝试的错误点：

• API拼写错误：getElementByClassName、getElementByTagName为错误写法，正确API为复数形式getElementsByClassName、getElementsByTagName，缺失末尾的s会直接触发方法不存在报错
• 选择器语法错误：querySelector匹配类名需要加.前缀，querySelector('chat-wrapper')是匹配标签名为chat-wrapper的元素，而非类名，因此返回null
• 时机问题：需要等自定义元素完全挂载、shadow DOM渲染完成后再执行获取逻辑，否则会出现元素不存在的问题

基础可用代码 #

// 等待页面资源全部加载完成后执行逻辑
window.addEventListener('load', () => {
  // 逐层穿透shadow DOM获取目标元素
  const dfMessenger = document.querySelector('df-messenger');
  if (!dfMessenger) return;

  const messengerChat = dfMessenger.shadowRoot?.querySelector('df-messenger-chat');
  if (!messengerChat) return;

  const chatShadowRoot = messengerChat.shadowRoot;
  if (!chatShadowRoot) return;

  // 类选择器加.前缀
  const chatWrapper = chatShadowRoot.querySelector('.chat-wrapper');
  console.log('目标元素：', chatWrapper);
  // 后续对chatWrapper的操作写在此处
})

兼容动态加载场景 #

如果df-messenger是页面加载完成后动态插入的，可使用轮询逻辑确保获取成功：

// 封装获取逻辑
function queryChatWrapper() {
  const dfMessenger = document.querySelector('df-messenger');
  if (!dfMessenger) return null;
  const messengerChat = dfMessenger.shadowRoot?.querySelector('df-messenger-chat');
  if (!messengerChat) return null;
  return messengerChat.shadowRoot?.querySelector('.chat-wrapper') || null;
}

// 轮询10次，每次间隔300ms
let retry = 0;
const timer = setInterval(() => {
  const chatWrapper = queryChatWrapper();
  if (chatWrapper || retry >= 10) {
    clearInterval(timer);
    if (chatWrapper) {
      // 拿到元素后的操作
      console.log('获取成功', chatWrapper);
    }
  }
  retry++;
}, 300)

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