Hello!

I added the web-vitals-element to my site today, except I was confused when a score of 0 in CLS returned a 'needs-improvement' CSS class. See a screenshot from the DOM inspector on my /projects page.

I checked the appropriate pages on web.dev/measure. This one, for example, returned 0.001 CLS on this single run.

According to this bit of code in web-vitals.js, a score of 0.001 should return 'good'.

  [
    'CLS',
    {
      thresholds: {
        good: 0.1,
        needsImprovement: 0.25,
      },
      observerEntryType: 'layout-shift',
      explainerURL: 'https://web.dev/cls/',
      longName: 'Cumulative Layout Shift',
    },
  ],

Could a value of "0" in some cases be being evaluated as false in the comparison below?

 if (needsImprovement && value <= needsImprovement) {
    score = 'needs-improvement';
}

Especially as I'm not receiving a 'unit' in this bit of code:

${value ? `${Math.floor(value)}${unit ? unit : ''}` : '...'}

I had the element working just fine using Babel as compiler with the following line in my script:

import 'web-vitals-element';

Switching over to webpack leads to an error:

Module not found: Error: Package path . is not exported from package /home/patrick/github.com/davidsneighbour/kollitsch.dev/node_modules/web-vitals-element (see exports field in /home/patrick/github.com/davidsneighbour/kollitsch.dev/node_modules/web-vitals-element/package.json)

I changed it for testing to import 'web-vitals-element/dist/web-vitals-element.js'; and the error extended to

Module not found: Error: Package path ./dist/web-vitals-element.js is not exported from package /home/patrick/github.com/davidsneighbour/kollitsch.dev/node_modules/web-vitals-element (see exports field in /home/patrick/github.com/davidsneighbour/kollitsch.dev/node_modules/web-vitals-element/package.json)

I assume for some reasons the export parameter in the package.json needs some additions? I have to learn about the export part of package.json, but maybe you have an idea what is going on.

The script importing is a typescript file (script.ts).

I saw this web component a while ago and always wanted to include it in one of my projects. Did it today and stumbled over some issues or things I would do differently or things I did not find documented anywhere. The following is a list, please don't treat it as an issue, just some notes that might help you improve the project.

the setup

• a commit where I implement the component to my website
• my website (the component is in the footer)
• the sass styles for the component

ideas, suggestions

• Styling the output is complicated. The fact that the output is done as a definition list makes it hard to style it nicely (for me, on bootstrap 5) because those list tend to be structured vertically in design systems. Making them a nice line from left to right (horizontally) requires lots of display: inline CSS on many elements (see the sass styles). I think that might be the case for other style systems too. Maybe additional options of what tags are used to render labels and values might help, maybe even add a template setting? Might be overkill.
• My website is so fast (hehe), that I can't see anything else than is-final and is-good as classes on the values of the vitals. Sometimes I see three dots when a vital is not calculated and it does not seem that a class is added in those cases. I would expect the system to have some form of traffic light system... yellow for "we are on it", red for "that is bad" and green for "good". Could you either document the classes applied while running/when done or implement some form of system? To me it appears that is-final and is-good are the only classes applied. something along the lines of is-in-progress would be nice. I thought that there might be an is-bad but I didn't come across one of these on my site yet. So... either a better documentation or some new features :)
• the docs also do not say anything about the thresholds that result in an is-good class. I feel like that should be at least documented and maybe even configurable.
• add npm install web-vitals-element and import 'web-vitals-element'; as installation methods. I am using ESBuild (in GoHugo) to build my JS and this is much better than a script tag somewhere on my page.

long story short

I like to gloat and this component helps immensely, thank you :)