Incorrect INP attribution when using web components

[kevinfarrugia]

When interacting with a web page that uses web components (for example https://todomvc.com/examples/web-components/dist/ or https://todomvc.com/examples/lit/dist/) the interaction target is incorrectly reported as the #shadow-root.

In the preceding screenshot, in the first interaction I interacted with the input.new-todo element (text field) and on the second interaction with the input.toggle (checkbox) element. In both cases, the web-vitals library reported the interaction target as the <todo-app>.

Expected

I would expect that the interaction target matches the same behavior as seen when not using web components.

The preceding screenshot is taken from a plain JavaScript demo, for example https://todomvc.com/examples/javascript-es6/dist/.

[tunetheweb]

As this comes directly from Event Timing this isn't an issue with the library per se, but more to do with Event Timing and/or Chrome's implementation of that. But prior discussion seems to suggest we should NOT expose the shadow dom elements so it's WAI?

CC: @mmocny