fix: Do not bail on calculating position of popover if its trigger is inside Shadow DOM

[n1313]

Description

This PR fixes a problem that prevents Popovers from working from inside Shadow DOM.

Currently, Popover bails on calculating dimensions of its body if its trigger does not belong to the document. This check is done using nodeContains utility. This is an optimization to prevent calculations from running in virtual environments where Popover wouldn't work anyway. However, this also prevents Popover from working from inside Shadow DOM, as the nodeContains doesn't work across the Shadow DOM boundary and the check fails.

This PR fixes this by checking if Popover is rendered inside Shadow DOM, and if so, checking that the trigger is contained inside it.

With this change customers will be able to use Popover in applications that use Shadow DOM.

Related links, issue #, if available: related to AWSUI-60527.

How has this been tested?

1. unit tests

2. I have built a small playground page with a webcomponent wrapped in Shadow DOM that contains a Popover. I have verified that the Popover does not work in the playground before the fix, and does work after

   before	after

   I can include the playground code into this PR, but the code is a bit hacky.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[pan-kot]

I think this check rootNode !== document might result in false positives when popover is rendered within an iframe, in which case the getRootNode() will return the iframe's document, not top document.

[n1313]

I will have to double-check this, but my first thought is that the iframe's document is not a Node.DOCUMENT_FRAGMENT_NODE.

[pan-kot]

You're right. I haven't realised that is not the global document but popover.ownerDocument. I think it would be nice to add a new util to utils/dom, something like:

function isInShadowDom(element: Element) {
  const rootNode = element.getRootNode();
  return rootNode !== element.ownerDocument && rootNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
}

[pan-kot]

Considering the complications of supporting the click() event, how about we scope the tests to the popover container (internal) component instead? You can add a new test file popover-container.test.tsx and assert the expected placement, but without the need to make it visible first.