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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser: Chrome 147

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 14 days ago

Test name	Executions per second
Extra class (one selector)	47250568.0 Ops/sec
Extra class (two selectors)	2813438.0 Ops/sec
Extra class (full example)	1645786.5 Ops/sec
Extra class (multiple querySelector)	2830238.5 Ops/sec
:has(>:not()) (single)	7129071.5 Ops/sec
:has(>:not()) (full example)	5593533.5 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)