search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

Add support for shadowdom/webcomponents #121

Open phun-ky opened 3 years ago

phun-ky commented 3 years ago

Is it possible to add support for usage with shadow DOM / webcomponents?

ten1seven commented 3 years ago

Hi @phun-ky, I honestly haven't done any work with the shadow DOM. Do you have some specific use cases that could help me think through both of these requests?

phun-ky commented 3 years ago

Basically, we have a webcomponent rendered like this in the DOM:

Screenshot from 2021-06-10 08-53-05

And this is the focus styling. This is usually in an external css (with link), but since the selector will never "penetrate" the webcomponent (shadow dom, scoped), it is not having an effect.

Screenshot from 2021-06-10 08-52-54

However, I modified the whatinput script to be included in the webcomponent (which is pretty heavy tbh, since it has to be included for every web component in a page), so it works.

Link to the webcomponent code: https://gist.github.com/phun-ky/1b0a91552b13e20de6c150f667a6d26f Link to modified whatinput: https://gist.github.com/phun-ky/efd8785690ab3279a43d2da7bc634a40

Basically allowing to send in a global instead of using window, and use that same global as the anchor for the attributes required.

I removed some polyfill stuff and the sessionStorage stuff, since It's not needed for my use case.