getSelector() generating invalid selector when there are leading or trailing spaces in the class.

[Tiggerito]

web-vitals/src/lib/getSelector.ts

Line 34 in 0a87ab0

? '.' + el.className.replace(/\s+/g, '.')

We picked up a scenario where getSelector() created an invalid selector:

class="layout-block product-layout-block "

The key thing is the space after the class names. This results in an extra dot being added to the selector:

'layout-block.product-layout-block.'

A simple fix would be to trim the class first:

? '.' + el.className.trim().replace(/\s+/g, '.')

It's probably also with checking for class names with just a space and IDs with leading or trailing spaces.

Is there any reason to limit the selector to 99 characters at this point? I know GA4 has a limit, but I split the selector in two to get around it, and now that will not work because of this limit.

[tunetheweb]

Triming it SGTM.

Yes I suspect the limit of 100 was chosen to match GA4. We could expose an optional, configurable limit (the getSelector function is already set up to take this) as think I'd like to keep the default as it is.

[Tiggerito]

Changing the limit would be good. I send the selector to GA4 using two parameters, so my limit is 200.

At the moment, I have copied the getSelector function, changed the limit and calculate the selectors using that instead.

var entry=attribution.largestShiftSource||attribution.lcpEntry||attribution.eventEntry;
var debugTarget=(entry&&MyGetSelector(entry.node||entry.element||entry.target))||'';

[tunetheweb]

Trim of the classname was implemented in #328 and, as discussed in #329 we won't change the selector length limit to make it optional.