我想等到 Shadow DOM 元素加载完毕

Question

我正在开发一个 Chrome 扩展程序。

我想开发一个功能，当您将鼠标悬停在页面上的某个元素时，该元素周围会出现一个框架，但它不适用于 Shadow DOM 元素。

我相信这是因为在加载事件触发时，shadow dom 元素没有加载到页面上。

对于具有嵌套影子 dom 的页面尤其如此。 例如） https://developer.servicenow.com/dev.do

但是，我愿意不知道如何检测整个页面，包括shadow dom，已经完成加载。

如果您知道解决方案，请告诉我。

function addAttribute(e) {
  const el = e.path || (e.composedPath && e.composedPath());
  el.setAttribute('style', "outline: solid 4px !important");
}

function removeAttribute(e) {
  const el = e.path || (e.composedPath && e.composedPath());
  el.removeAttribute('style', "outline: solid 4px !important");
}

function addEventListenerToShadow(root) {
  const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
  
  do {
    const currentNode = tw.currentNode;
    if (currentNode instanceof ShadowRoot) continue;
    if (currentNode.shadowRoot) {
      currentNode.shadowRoot.addEventListener('mouseover', addAttribute)
      currentNode.shadowRoot.addEventListener('mouseout', removeAttribute)
      addEventListenerToShadow(currentNode.shadowRoot);
    }
  } while (tw.nextNode());
}

window.onload = addEventListenerToShadow(document.body);

Answer 1

（嵌套）shadowDOM 是进入教室的 (DOM) 子级。

只有当你知道会有多少人进来时，你才能知道最后一个人是什么时候进来的。

这意味着每个（影子）DOM/元素应该通知它将来到主应用程序。

然后应用程序处理/倒计时每个“到达的”DOM Child/shadowDOM

connectedCallback 在自定义元素的opening 标签上触发

，以便是向应用程序发送 CustomEvent I_WILL_COME 的适当时间。

但是......在您的用例中，您无法控制组件的功能。
因此，唯一的逃避方法就是等待 N 秒并考虑您的页面已加载。