How do you get the actual click event target?

[treeder]

If I have this in my component called my-component

<div @click="${this.doSomething}">click me</div>

And this function:

 doSomething(e) {
        console.log("doSomething", e)
    }

e.target is the web component, ie: my-component, not the div that I would expect. How do I find the div that was clicked?

[sorvell]

The target is the div in this case. Only if an event crosses a shadowRoot target is it retargeted. In that case, event.composedPath() provides an array, the first element of which is the original target.

[treeder]

But it's not the div, that's the problem.

[abraham]

If you just look at the logged output in DevTools it might not show what you're expecting after the fact. You can see that target is the div in the click handler though.

demo

[treeder]

Ahh, interesting. Ya, was looking at dev tools and it shows the target as the component:

Good to know though, thanks.