6

Consider below component chain in Aura:

<c:parent>
    <c:child>
        <c:grandChild>

When grandChild fires event, we can get hold of the source component by using event.getSource().
So, if I have an aura:method in grandChild, then I can invoke and pass some data to grandChild by using below in parent JS:

component.find("grandChild").myMethod(someData);

myMethod is aura:method in grandChild

Now lets consider same chain in LWC:

<c-parent>
    <c-child>
        <c-grand-child>

Here, when grand-child fires event, and when we are handling that event in parent, event.target will point to child and not grand-child. This is because of reparenting of event concept in web components.

Use case: child is a reusable component which has many levels of child components. Each of child component triggers different events on init. Other developers can pass the data to grandChild based on event. Now, the child component is a very complicated component which has many different views, so the design of this cannot be changed. We are facing the problem when migrating this component to LWC as we are unable to pass the data using some simple method. I know of other principles like redux, but would like to know if any simpler methods exist.

PFB: enter image description here

1

Doesn`t look like there is a cross browser supported way of achieving what you want. Event Standards are either not working or are locked by LWC. So i guess you have to use alternative approaches like message brokers or similiar where grandchild components register and the parent subscribe to events (similiar to pub sub)


Old Answer: I guess you could configure the event as {bubbles:true, composed: true} which would bubble up the event also across shadow boundaries. For concerns by sfdc itself regarding that topic read docs here. So i guess it would make sense to at least call stopPropagation at your parent. Example can be seen here


5
  • Thanks for feedback. I am already doing that, the problem is not about event accessibility, the problem is that the event.target keeps changing as it bubbles up. – salesforce-sas Jul 21 '19 at 12:09
  • either i am not getting your point or you did not checked the example. The parent is calling the grandchild api method - thats what you wanted or not? – Renji-xD Jul 21 '19 at 12:15
  • Playground actually has some bugs - shadow DOM is one of them. Can you please implement in sandbox and check. Adding a screenshot in question for your reference. – salesforce-sas Jul 21 '19 at 12:43
  • To further add, use "this.value = First Parent - got ${event.detail} from ${event.srcElement.tagName};" in firstParent. You will see C-GRANDCHILD in playground but in sandbox you will C-PARENT as source tagName – salesforce-sas Jul 21 '19 at 13:08
  • hm ya looks like they have changed it in their summer release (or just not working in conjunction with lockerservice) - I updated my answer. While there are some workarounds which seems to work in chrome, ff and ie it seems there is no cross browser solution because some of the apis seems to be locked down in lwc / lockerserivce... guess you have to find an alternative way of doing it instead of events – Renji-xD Jul 21 '19 at 14:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.