focus-trap: Web components with ShadowDOM, unable to focus on elements in slot (LightDOM)

I’m using focus-trap in a web components library but I am unable to make the package work with elements within a ShadowDOM slot. Is there a way to have a single focus trap contain elements from both the ShadowDOM and elements passed in via the slot?

Example:

// modal.js

const Modal = (props) => {

  const trapFocus = (element) => {
    const trap = focusTrap.createFocusTrap(element)
    trap.activate()
  }

  return (
    <div ref={trapFocus}>
      <a href="#">These items</a>
      <a href="#">get trapped</a>
      <slot /> // Elements in slot don't get trapped
    </div>
  );
}

// index.html
<custom-modal>
    <button>This goes in the slot and isn't included in the focus trap</button> 
</custom-modal>

Thank you!

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 18 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Thanks for the recording. I’m wondering if this is somehow related to #643

Also, at minimum with the new tabbable beta, you should have

createFocusTrap(rootNode, {
  tabbableOptions: {
    getShadowRoot: () => true
  }
});

That will activate tabbable’s shadow DOM support and will find everything in open shadows.

@stefcameron Thanks for much for the work on this! I’ll give this a try shortly 👍

@andresriveratoro Nice, glad to hear you were successful with it!

@stefcameron Thanks so much! 🎉

@stefcameron And just to point out, this library does work in the situation I need. It’s just not really maintained and I’d like to switch my projects to use your package since it is clearly maintained and has a larger community:

https://www.npmjs.com/package/@a11y/focus-trap

Thanks!