Problem inside shadow dom

Hello!

Consider a <div> to which a shadow dom is attached.

If I then add elements below this and use focus-trap for a child element (modal dialog im my case) the click event on the shadow dom will trigger for all those child elements and the event will be cancelled by this code:

  var checkClick = function checkClick(e) {
    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
      return;
    }

    if (containersContain(e.target)) {
      return;
    }

    if (valueOrHandler(config.allowOutsideClick, e)) {
      return;
    }

    e.preventDefault();
    e.stopImmediatePropagation();
  }; //

If I change if (containersContain(e.target)) { to if (containersContain(e.path[0])) { it works. path[0] will always be the actual clicked event, while the target in this case is the shadow dom parent.

[stefcameron]

@andersthorsen FYI, I managed to get my PR working. I think it works well, for both mouse and tab key. I will publish this in the next few days, as early as Saturday.

[allcontributors[bot]]

@stefcameron

I’ve put up a pull request to add @andersthorsen! 🎉