Add disallowIn config for web components and ShadowDOM

[fynnfeldpausch]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The library prevents hotkey callbacks from firing when their event originates from an input, select, or textarea element or any elements that are contenteditable. It is not possible to specify additional elements for which the hotkey callbacks are prevented.

Expected behavior

The library offers an additional config for every hotkey called disallowIn (similar to allowIn), where one can specify additional nodeNames that are then checked by the library. If a node is contained in that list, the hotkey will not fire.

What is the motivation / use case for changing the behavior?

We are using hotkeys in combination with custom form elements that are web components with ShadowDOM. For those elements, the triggered events will not contain the native input as an event trigger. Instead (due to shadow DOM) the trigger will be the custom web component itself. The hotkey will thus be triggered. It would be really easy to just add a config with a list of web component names, that should be disallowed.

Environment

Angular version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16  
- Platform: Mac

Others:

It would be awesome to bring this change in the v1.2.x

[NetanelBasal]

Maybe we can support web components and use event.composedPath()[0]

[fynnfeldpausch]

I am not sure if that works with shadow DOM. But I will check it out and get back to you :)

[NetanelBasal]

https://pm.dartus.fr/blog/a-complete-guide-on-shadow-dom-and-event-propagation/