Overlay Library – Using ReferenceSelector to Reference Element in Child Component

auralightning-overlaylibrarylightning-web-componentslwc-dom

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?

Best Answer

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.

Related Solutions

CSS – How to Target Inner Elements of Standard Lightning Web Components

As of Winter `21, you can use styling hooks (beta): https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_custom_properties

LWC Callback – How to Pass Callback to Child Lightning Web Component

you have to bind the method before passing it to the child.

Ex1: arrow function is auto bind.

export default class Parent extends LightningElement {

   onResult = () => {
      this.doSomething();
   }
}
----
<template>
    <c-child result-callback={onResult}></c-child>
</template>

Ex2: binding it in the constructor.

export default class Parent extends LightningElement {
   result = this.onResult.bind(this)

   onResult() {
      this.doSomething();
   }
}
----
<template>
    <c-child result-callback={result}></c-child>
</template>

Best Answer

Related Solutions

CSS – How to Target Inner Elements of Standard Lightning Web Components

LWC Callback – How to Pass Callback to Child Lightning Web Component

Related Topic