Does not work on elements within a shadow root about focus-trap HOT 4 CLOSED

Another issue I have just come across is elements that are projected using <slot> are not picked up in the tab order and therefore cannot be tabbed to. Those DOM trees are not traversed because they live in the light DOM and are just rendered in the slot location within the shadow dom. This also has to do with tabbable and it would have to be updated to find any children that are slot elements, and traverse the value returned from each [slotNode].assignedNodes() call.

from focus-trap.

@DRiFTy17: I'm open to PRs fixing these libraries for usage with the shadow DOM. I am not currently using web components and don't think I will be for some time, so I won't lead the way here. Sounds like you have some promising ideas 👍

from focus-trap.

@davidtheclark Okay let me see what I can put together, and I'll try to work out the various issues to get this supported. I'll submit the PRs when I get things complete.

from focus-trap.

With v3 (involving some changes to Tabbable) you should be able to include shadow DOM nodes or iframes or whatever in the middle of the focus-trap. Things will get weird if you include those things as the first or last tabbable nodes in the trap. This caveat is now documented in the readme.

So I'm going to close this issue. If anybody comes up with implementation changes that might rid us of that caveat, please open a new issue or PR.

from focus-trap.