I have a parent aura component in which I have <lightning:overlayLibrary aura:id="overlayLib"/> included. I want the popover to be displayd next to a DOM element which exists inside a child LWC component.

When calling showCustomPopover() I attempt to pass a selector to 'referenceSelector' in order to identify the target element. I tried it with id selector, data selector as well as class selector. For example:

referenceSelector: `.aid${recordId}`

But it doesn't seem to work. Does anyone have a suggestion?

  • 2
    Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Mar 16, 2022 at 17:25

1 Answer 1


You can't select an element inside a child Shadow DOM. The framework treats the entire component as an atomic unit. As such, you can target the LWC component itself, but nothing inside of it. Unfortunately, this means you'll have to implement your own custom popup, as this library doesn't exist in LWC.

  • Alright. Actually I had already feared that this issue is related to the shadow dom. Thanks.
    – renehahn
    Mar 16, 2022 at 20:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .