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);
(anidados) shadowDOM son (DOM) niños que ingresan a su salón de clases.
Sólo cuando sabes cuántos vendrán sabes cuándo entró el último.
Eso significa que cada DOM/Elemento (sombra) debe notificar que llegará a la aplicación principal.
Y la aplicación luego procesa/cuenta regresivamente cada DOM Child/shadowDOM "llegado"
La devolución de llamada connectedCallback
se activa en la ETIQUETA de apertura de su elemento personalizado
Ese es el momento adecuado para enviar un CustomEvent
I_WILL_COME a la aplicación.
PERO... en su caso de uso, no tiene control sobre lo que hacen los componentes. Entonces, el único escape es esperar N segundos y considerar que su página está cargada.