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!

[kee-oth]

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

[stefcameron]

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