refactor: usage of root node for getting window or shadow root

[sshanzel]

Changes

Describe what this PR does

• After reading through the proposals of what will be the official API for getting the Selection on shadow DOM, there seems to be no clear date of when to expect it.
• Though after going through the links below, I was able to find a better solution for fetching the actual root.
• We now require an element to be passed to identify which root it belongs to when we use getRootNode.

Relevant links:

• Selection APIs for Shadow DOM WICG/webcomponents#79
• https://github.com/mfreed7/shadow-dom-selection#proposal (Proposal)

One example is if you visit our preview deployment, which is not whitelisted in our background worker, and if you inspect the HTML, you'll notice the shadow DOM to be present but the user mention still works since the getRootNode provides a more accurate for which the element was embedded.

Preview deployment: https://preview.app.daily.dev/

Please make sure existing components are not breaking/affected by this PR

I have also manually tested the preview deployment on all major browsers we support (including Safari and Edge).

Manual Testing

On those affected packages:

• Have you done sanity checks in the webapp?
• Have you done sanity checks in the extension?
• Does this not break anything in companion?

Did you test the modified components media queries?

• MobileL (420px)
• Tablet (656px)
• Laptop (1020px)

Did you test on actual mobile devices?

• iOS (Chrome and Safari)
• Android

WT-104 #done

[rebelchris]

Wow interesting find!
Looks great, thanks for testing and validating this better fix :)

[sshanzel]

@rebelchris I refactored it a bit to be safer from edge cases on any other browsers outside of Chromium, just to be sure. Let me know if have any concerns about it. Thank you for the awesome review!

Also thoroughly tested it on our browser on all ends.