LWC: Getting original element that dispatched event that bubbles

Question

I'm encountering some behavior in LWC that runs counter to my understanding of Event.target -- namely, that it is supposed to represent the DOM element that originally dispatched the event.

Here is an example where a grandchild component dispatches the event and the parent component receives it. event.target is reflecting the child component, not the grandchild.

parent.html

<template>
    <div onmyevent={handleMyEvent}>
        <c-child></c-child>
    </div>
</template>

parent.js

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
  handleMyEvent(event) {
    console.log(event.target.tagName); // Receiving "C-CHILD" (expecting "C-GRANDCHILD")
  }
}

child.html

<template>
  <c-grandchild></c-grandchild>
</template>

grandchild.html

<template>
  <button onclick={handleButtonClick}>Dispatch event</button>
</template>

grandchild.js

import { LightningElement } from "lwc";

export default class Grandchild extends LightningElement {
  handleButtonClick() {
    this.dispatchEvent(new CustomEvent("myevent", { bubbles: true, composed: true }));
  }
}

Here is a demo: https://stackblitz.com/edit/salesforce-lwc-ezdzna?file=src%2Fmodules%2Fx%2Fapp%2Fapp.html

I would like the parent component to perform an action on the grandchild component when the event is received. How can this be accomplished?

Answer 1

This is the expected behavior, as specified in the documentation.

When an event bubbles up the DOM, if it crosses the shadow boundary, the value of Event.target changes to match the scope of the listener. This change is called “event retargeting.” The event is retargeted so the listener can’t see into the shadow DOM of the component that dispatched the event. Event retargeting preserves shadow DOM encapsulation.

In other words, if you wanted to see c-grandchild as the target, you need to have the c-grandchild within the parent's Shadow DOM, as demonstrated below, using a fork of your own code.

<div onmyevent={handleMyEvent}>
    <x-child>
        <x-grandchild></x-grandchild>
    </x-child>
</div>

<template>
    <div style="background-color: lightyellow; padding: 1rem;">
        <slot></slot>
    </div>
</template>

Demo.