Run results for: Custom class (single querySelector) vs :has(> :not())

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Browser: Firefox 150

Operating system: Linux

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
Extra class (one selector)	3343387.2 Ops/sec
Extra class (two selectors)	1277721.8 Ops/sec
Extra class (full example)	900269.6 Ops/sec
Extra class (multiple querySelector)	565428.9 Ops/sec
:has(>:not()) (single)	1793225.8 Ops/sec
:has(>:not()) (full example)	860421.8 Ops/sec

HTML Preparation code:

<button class="button">
  <span class="icon-slot">
  </span>
  No icon
</button>

<button class="button">
  <span class="icon-slot">
    <div class="3p-icon">&nbsp;</div>
  </span>
  3P icon
</button>

<button class="button">
  <span class="icon-slot">
    <i>icon</i>
  </span>
  1P icon
</button>

Tests:

Extra class (one selector)
document.querySelector('.button .icon-slot-custom');
Extra class (two selectors)
document.querySelector('.button .icon-slot-custom, .button .icon-slot-custom i');
Extra class (full example)
document.querySelector('.button .icon-slot-custom, .button .icon-slot-custom i, .button .icon-slot-custom img, .button .icon-slot-custom svg');
Extra class (multiple querySelector)
document.querySelector('.button .icon-slot-custom'); document.querySelector('.button .icon-slot-custom i'); document.querySelector('.button .icon-slot-custom img'); document.querySelector('.button .icon-slot-custom svg');
:has(>:not()) (single)
document.querySelector('.button .icon-slot:has(> :not(i))');
:has(>:not()) (full example)
document.querySelector('.button .icon-slot:has(> :not(i), > :not(img), > :not(svg))');

Run results for: Custom class (single querySelector) vs :has(> :not())

Extra class (one selector)

Extra class (two selectors)

Extra class (full example)

Extra class (multiple querySelector)

:has(>:not()) (single)

:has(>:not()) (full example)