Add support for shadowdom/webcomponents

[phun-ky]

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

[ten1seven]

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]

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

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.

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.