Así que estoy usando un complemento de jQuery en shadowRoot en mi aplicación. El html es el siguiente
#shadow-root <div id="container"> <div class="display-item">Item 1</div> <div class="display-item">Item 2</div> <div class="display-item">Item 3</div> <div class="display-item">Item 4</div> </div>Quiero adjuntar detectores de eventos a los divs con class = "display-item" para eventos como mousedown,mousedown,focus. Intenté lo siguiente:
let root = document.getElementById(divID).shadowRoot; $(root).on('mousedown', '#container div.display-item', function(event) { //function });Pero esto no funciona. ¿Cómo podría hacer que esto funcione?
EDITAR :
También probé este enfoque, algo así como $('#container .display-item'), pero no funcionaría ya que está buscando esos elementos en el documento que creo y no los encontraría ya que están bajo la sombra. DOM, entonces tengo que usar la raíz como pivote. ¿Existe un equivalente del método 'buscar' de jquery en el que pueda consultar varios elementos con la misma clase, usando la raíz de la sombra como pivote? De esa forma, puedo adjuntar detectores de eventos a los elementos individuales de forma explícita.
En el mundo ideal, los componentes web deberían preocuparse por el mundo "exterior",
y, sobre todo, el Exterior no debe depender del mundo interior de los Componentes Web.
Eso significa que el componente debe encargarse de adjuntar oyentes.
Dado que tiene el control de lo que hace el Componente, no es necesario addEventListener (permitiendo múltiples oyentes iguales)
customElements.define("my-component", class extends HTMLElement { constructor() { super().attachShadow({mode: "open"}) .innerHTML = `<div id="container"> <div class="display-item">Item 1</div> <div class="display-item">Item 2</div> <div class="display-item">Item 3</div> <div class="display-item">Item 4</div> </div>`; } listen() { this.shadowRoot.querySelectorAll('.display-item').forEach(div => { div.onclick = (evt) => { document.body.append(div.innerText); } }); this.listen = () => console.warn("ran attach listener once"); } }) <my-component id=COMP></my-component> <script> window.onload=()=>{ document.querySelector("#COMP").listen(); } </script>Nota: IE9 fue el último navegador en implementar JS queryselectors... en 2011
Si solo usa jQuery para su $() , ha cargado a sus clientes con una descarga no requerida de más de 80 KB durante los últimos 11 años.
Si realmente quieres tocar el mundo interior
document.querySelector("#COMP").shadowRoot.querySelectorAll('.display-item').forEachhace el truco, pero se rompe cuando hay más shadowRoots en el medio.
Y en mi mundo no le digo a los Componentes qué hacer,
Hago que los componentes escuchen :
window.onload=()=>{ document.dispatchEvent("LISTEN"); }