joshyu/readme.md

Last active August 16, 2021 01:40

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/joshyu/4685744849c1889b80a3c6156197ba2f.js"></script>
Save joshyu/4685744849c1889b80a3c6156197ba2f to your computer and use it in GitHub Desktop.

detect internal component when clicking on webcomponent

Raw

When we want to detect which internal component we are clicking on some webcomponent,we can use event.composed to check whether the event is broadcasted through a webcomponent, and then check the array list returned from event.composedPath() to look up the DOM, if found then we can confirm we are clicking on the specified DOM node and do some specific things.

https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

Author

joshyu commented Aug 16, 2021

$('.webcomponent-class').on('click', event => {
     const paths = event.originalEvent.composedPath();
     const clickOnCloseButton = paths.filter(node=>{
       return node && node.classList && node.classList.contains('webcomponent-internal-dom-class');
     }).length >0;

    if(clickOnCloseButton){
      $(event.currentTarget).addClass('hide');
    }
  });

joshyu/readme.md

joshyu commented Aug 16, 2021

Uh oh!