Estoy desarrollando una extensión de Chrome.

Me gustaría desarrollar una característica que cuando pasa el cursor sobre un elemento en la página, aparece un marco alrededor del elemento, pero no funciona con el elemento Shadow DOM.

Creo que esto se debe al hecho de que el elemento shadow dom no está cargado en la página en el momento en que se activa el evento de carga.

Esto es especialmente cierto para páginas con shadow dom anidados. ej.) https://developer.servicenow.com/dev.do

Sin embargo, no sé cómo detectar que toda la página, incluido el shadow dom, ha terminado de cargarse.

Por favor, hágamelo saber si sabe de una solución.

 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);