search

GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.63k stars 418 forks source link

Incorrect INP attribution when using web components #572

Open kevinfarrugia opened 3 days ago

kevinfarrugia commented 3 days ago

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.

Screenshot of Chrome DevTools showing two interactions that report the `#shadow-root` as the interaction target

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.

Screenshot of Chrome DevTools showing two interactions. The first reports an interaction target for input.new-todo. The second interaction reports input.toggle

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

tunetheweb commented 3 days ago

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