Detect click outside of the current web component

user_8772974 0
Viewed 481

I have a web component (Polymer 3) that is embedded in other components and want to "sense" clicks outside of it. For example, in React I would do something like this inside of the component:

document.addEventListener('click', this.handleClickOutside, true);

 public handleClickOutside = event => {
        const domNode = ReactDOM.findDOMNode(this);

        if (!domNode || !domNode.contains(event.target)) {
           //logic
        }
    }

Above we simply add a click event, and then check if the event have targeted the current component via a reference.

As its "react syntax" I need to to something similar but for web components. I need a reference to the current web component. I have tried:

 const domNode = this;

And

const domNode = this.$['my-component'];

without luck. Any help?

polymer web-component typescript javascript
2 Answers

Technically, you couldn't. I do something like it, some time ago.

You could listen when a click is done in the rest of dom and act. Use :not css selector, or just, simply, listen all clicks and 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...
  }
});
user_173414110

const domNode = ReactDOM.findDOMNode(this);

LOL, "Let's query the whole (virtual)DOM"
and they still claim React is fast?

Reverse your logic, detect clicks inside your component.

It is 2021, we no longer support IE

Event.composedPath() gives you all DOM nodes the click Event passed.

And do read the focusout Event and :focus-within CSS answers
at: How do I detect a click outside an element?

I added some nested shadowDOMs to show composedPath gives you all DOM nodes.

Remember: CustomEvents need composed:true as option setting, for the Event to escape shadowDOM.
Native Events like click always escape shadowDOM

And remember... React never supported the native Event model.
https://custom-elements-everywhere.com/libraries/react/results/results.html
You have to write a React wrapper for each and every native Web Component
That is like buying a can of soup, and always having to buy a canopener with it.

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

user_25208000
Related