Tengo un componente web (Polímero 3) que está incrustado en otros componentes y quiero "detectar" clics fuera de él. Por ejemplo, en React haría algo como esto dentro del componente:
document.addEventListener('click', this.handleClickOutside, true); public handleClickOutside = event => { const domNode = ReactDOM.findDOMNode(this); if (!domNode || !domNode.contains(event.target)) { //logic } }Arriba, simplemente agregamos un evento de clic y luego verificamos si el evento se ha dirigido al componente actual a través de una referencia.
Como su "sintaxis de reacción", necesito algo similar pero para componentes web. Necesito una referencia al componente web actual. Yo he tratado:
const domNode = this;Y
const domNode = this.$['my-component'];sin suerte ¿Alguna ayuda?
Técnicamente, no podrías. Yo hago algo parecido, hace algún tiempo.
Podrías escuchar cuando se hace un clic en el resto de dom y actuar. Use :not css selector, o simplemente, simplemente, escuche todos los clics y compare:
//listen clicks window.addEventListener('click', function(event){ //check if click was outside of #myObject if !(document.getElementById('myObject').contains(event.target)){ //Only if click outside... } });const domNode = ReactDOM.findDOMNode(esto);
LOL, "Consultemos todo el DOM (virtual)"
y todavía afirman que React es rápido?
Invierta su lógica, detecte clics dentro de su componente.
Es 2021, ya no admitimos IE
Event.composedPath() le proporciona todos los nodos DOM que pasó el evento de click .
Y lea el Evento focusout y :focus-within respuestas CSS
at: ¿Cómo detecto un clic fuera de un elemento?
Agregué algunos shadowDOM anidados para mostrar que composedPath le brinda todos los nodos DOM.
Recuerde: CustomEvents necesita composed:true como configuración de opción, para que el Evento escape de shadowDOM.
Eventos nativos como click always escape shadowDOM
Y recuerda... React nunca admitió el modelo de evento nativo.
https://elementos-personalizados-en todas partes.com/libraries/react/results/results.html
Debe escribir un contenedor React para todos y cada uno de los componentes web nativos.
Eso es como comprar una lata de sopa y tener que comprar siempre un abrelatas con ella.
<style> body { cursor:pointer } ::part(shadowdiv) { /* modern CSS shadowParts to style 'parts' inside shadowDOM */ color: white; font: 14px Arial; width: 80%; } </style> <custom-element></custom-element> <script> window.CEdepth = 0; window.addEventListener("click",e=>console.clear()); customElements.define("custom-element", class extends HTMLElement { constructor() { super().attachShadow({mode:'open'}); if (window.CEdepth++ < 3) { this.id = window.CEdepth; window.addEventListener("click", (evt) => { let inside = evt.composedPath().includes(this); console.log("clicked inside #"+this.id, ":", inside); }); this.style.display = "inline-block"; this.style.padding = "1em"; this.style.background = ["red", "blue", "green"][this.id - 1]; this.shadowRoot.innerHTML = `<div part='shadowdiv'>Web Component #${this.id}` +`<custom-element><b/></custom-element><div/>`; } } }) </script>