Run results for: shadow DOM vs light DOM

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/132.0.6834.78 Mobile/15E148 Safari/604.1

Browser: Chrome Mobile iOS 132

Operating system: iOS 18.1.1

Device Platform: Mobile

Date tested: one year ago

Benchmark engine: Benchmark.js

light DOM

1.2M/s

shadow DOM

1.1M/s

View exact numbers

Test name	Executions per second
✓ light DOM	1,196,687 Ops/sec
shadow DOM	1,109,680 Ops/sec

HTML Preparation code:

<template id="tpl">
  <div>
	<h3>title example</h3>
    <p>example para with an <a href="#"><b>example link</b></a></p>
  </div>
</template>

<div id="container"></div>

Script Preparation code:

const tplNode = document.getElementById('tpl').content;
const container = document.getElementById('tpl');

class MyEl extends HTMLElement {
  connectedCallback() {
    this.appendChild(tplNode.cloneNode(true))
  }
}

customElements.define("my-el-lgt", MyEl);


class MyElWithShadowDOM extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(tplNode.cloneNode(true))
  }
}

customElements.define("my-el-shd", MyElWithShadowDOM);

Tests:

light DOM
container.innerHTML = ` <my-el-lgt></my-el-lgt> `
shadow DOM
container.innerHTML = ` <my-el-shd></my-el-shd> `