:active pseudo-class cannot be styled on buttons-like divs inside vaadin-text-field

[mlopezFC]

Description

The :active pseudo-class can be used on divs and it works well when trying to style it by doing the following:

vaadin-text-field::part(clear-button):active {
  color: green;
}

It works well on Chrome but it is not working correctly on Firefox (both latests versions).
After discussing this internally it might be possible that preventDefault could be causing this.

Expected outcome

It should be possible to style the :active pseudo-class of inner button-like divs of text fields both on Chrome and Firefox.

Minimal reproducible example

Here's a way of reproducing it: https://studio.webcomponents.dev/edit/gu3kPE0FvnHYEstx2Zih/www/index.html?p=website
If you open this example on chrome it will style the button with green when pressing it, but it will not work on Firefox.

Steps to reproduce

1. Open: https://studio.webcomponents.dev/edit/gu3kPE0FvnHYEstx2Zih/www/index.html?p=website on Firefox
2. If you left-click and maintain the mouse button pressed on the "Reference div" it will turn green
3. If you do the same for the clear button, it won't change to green

Environment

Vaadin version(s): Latest
OS: Any

Browsers

Firefox

[web-padawan]

Confirmed that removing event.preventDefault() makes :active work (but breaks the focus logic as this is basically intended to suppress native blur event which doesn't trigger if mousedown is prevented).

Also reproduced with vaadin-combo-box (this component uses similar logic to vaadin-text-field, see also #6100).

UPD: there is a Firefox issue reported 12 years ago https://bugzilla.mozilla.org/show_bug.cgi?id=771241

And here is a related discussion: w3c/csswg-drafts#2262 - see e.g. w3c/csswg-drafts#2262 (comment):

But as I said in the bug you link, the default action of mousedown is to make things active. If you prevent its default action... they don't become active.