Run results for: El vs Custom El

Run details:

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

Browser: Chrome 78

Operating system: Mac OS X 10.14.4

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
Querying Els	110289.3 Ops/sec
Normal Els	1564065.9 Ops/sec

HTML Preparation code:

<script>
	
	const size = 1000;

	class MyButton extends HTMLElement {
		constructor(props) {
			super(props);
			const root = this.attachShadow({ mode: 'open' });

			var btnEl = document.createElement('button');
			btnEl.innerHTML = 'Normal Button';
			btnEl.style.background = 'green';
			btnEl.style.padding = '10px';

			root.appendChild(btnEl);
		}
	}
	customElements.define('my-button', MyButton);


	function addCustomElements(count) {
		for (var a = 0; a < count; a++) {
			var el = document.createElement('my-button');
			document.body.appendChild(el);
		}
	}

	function addNormalElements(count) {
		for (var a = 0; a < count; a++) {
			var el = document.createElement('button');
			el.innerHTML = 'Normal Button';
			el.style.background = 'green';
			el.style.padding = '10px';
			document.body.appendChild(el);
		}
	}


	const querySelectorDeep = (selector, rootEl) => {
		rootEl = rootEl || window.document.body;

		let matches = [];

		// Child nodes
		const childNodes = rootEl.childNodes;
		for (let i = 0; i < childNodes.length; i++) {
			matches = matches.concat(querySelectorDeep(selector, childNodes[i]));
			if (childNodes[i].matches && childNodes[i].matches(selector)) {
				matches.push(childNodes[i]);
			}
		}

		// Shadow root
		if (rootEl.shadowRoot) {
			matches = matches.concat(querySelectorDeep(selector, rootEl.shadowRoot));
		}

		return matches;
	};


	function prepareCustomElements() {
		addElementToBody('my-button', size);
	}

	function prepareNormalElements() {
		addElementToBody('button', size);
	}


	prepareCustomElements();
	prepareNormalElements();

</script>

Tests:

Querying Els
querySelectorDeep('my-button');
Normal Els
document.querySelectorAll('my-button');

Run results for: El vs Custom El

Querying Els

Normal Els