Run results for: shadow root test

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser: Chrome 129

Operating system: Linux

Device Platform: Desktop

Date tested: 8 days ago

Test name	Executions per second
flatMap	52726.5 Ops/sec
results closure	54278.1 Ops/sec

Script Preparation code:

for (let i = 1; i < 300; i++) {
    const wrapper = document.createElement('div');
    const shadowRoot = wrapper.attachShadow({
        mode: 'open'
    });
    shadowRoot.innerHTML = `
      <div>
        <form id="login">
          <input type="text" id="field1"><br>
          <input type="password" id="field2"><br>
          <input type="submit" id="field3" value="Submit">
        </form>
      </div>
    `;
}

Tests:

flatMap
function getShadowRoot(el) { if (!(el instanceof HTMLElement)) { return undefined; } if (window.chrome?.dom?.openOrClosedShadowRoot) { return window.chrome.dom.openOrClosedShadowRoot(el) ?? undefined; } if (el.openOrClosedShadowRoot) { return el.openOrClosedShadowRoot; } return el.shadowRoot ?? undefined; } function querySelectorAllWithShadowRoots( selector, rootNode = document ) { // this is always in document order according to querySelectorAll specification const allEls = Array.from(rootNode.querySelectorAll('*')); const selectedEls = new Set(rootNode.querySelectorAll(selector)); // Map across all els, and insert els from shadow root at the correct location to retain document // order. return allEls.flatMap((el) => { const result = []; if (selectedEls.has(el)) { result.push(el); } const shadowRoot = getShadowRoot(el); if (shadowRoot) { result.push(...querySelectorAllWithShadowRoots(selector, shadowRoot)); } return result; }); } querySelectorAllWithShadowRoots('input');
results closure
function getShadowRoot(el) { if (!(el instanceof HTMLElement)) { return undefined; } if (window.chrome?.dom?.openOrClosedShadowRoot) { return window.chrome.dom.openOrClosedShadowRoot(el) ?? undefined; } if (el.openOrClosedShadowRoot) { return el.openOrClosedShadowRoot; } return el.shadowRoot ?? undefined; } function querySelectorAllWithShadowRoots( selector, rootNode = document ) { const result = []; const findInRoot = (rootNode) => { // this is always in document order according to querySelectorAll specification const allEls = Array.from(rootNode.querySelectorAll('*')); const selectedEls = new Set(rootNode.querySelectorAll(selector)); for (const el of allEls) { if (selectedEls.has(el)) { result.push(el); } const shadowRoot = getShadowRoot(el); if (shadowRoot) { findInRoot(shadowRoot); } } }; findInRoot(rootNode); return result; } querySelectorAllWithShadowRoots('input');

Run results for: shadow root test

flatMap

results closure