Add support for shadowdom/webcomponents #121

Activity

1. ten1seven commented on Jun 9, 2021

   

   ten1seven

   on Jun 9, 2021

   Owner

   More actions

   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?
2. ten1seven

   self-assigned this

   on Jun 9, 2021
3. phun-ky commented on Jun 10, 2021

   

   phun-ky

   on Jun 10, 2021

   Last edited by phun-ky

   Author

   More actions

   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.
4. ten1seven

   removed their assignment

   on Jul 2, 2024