[Dialog] Focus trap does not work properly when <sl-dialog> is in a shadow root

[pablo-abc]

Describe the bug

Rendering and opening an <sl-dialog> inside of a shadow root does not seem to play nice with the focus trap. I can tab out of the dialog into elements underneath it.

The scroll-lock also does not seem to work nicely when inside a shadow root (I can still scroll the content underneath)t. But this is inconsistent and I did not manage to reproduce it in a simple example. Mentioning it here just in case it's something similar to the focus trap. But might as well be something in my project.

To Reproduce

Steps to reproduce the behavior:

1. Create a new Lit project
2. Add shoelace as a dependency (or via CDN)
3. Use the example code from the documentation
4. Open the dialog and press tab. The focus will move to the button underneath.

Demo

Reproduction on CodeSandbox

Browser / OS

• OS: Mac
• Browse:r Safari and Firefox
• Browser version: 15.1 and 99.0beta

[claviska]

Nice catch, and thanks for the repro. I was able to repro and update the modal utility to trap focus a bit differently which is more reliable and solves for the use case you provided.

This fix will be available in the next beta release.