Shadow dom-perf (v4)

Revision 4 of this benchmark created on

Preparation HTML

<div id="shadowContainer">
    <div id="shadowElement">shadow text</div>
  </div>
  <div id="simpleTemplateDiv" style="display: none;">
    <p class="textElement">This is <content></content></p>
  </div>
  <template id="simpleTemplate">
    <p class="textElement">This is <content></content></p>
  </template>

Teardown


    // Reset result
    document.querySelector('#shadowContainer').innerHTML = '<div id="shadowElement">shadow text</div>';
    // Reset template
    document.querySelector('#simpleTemplateDiv').innerHTML = '<p class="textElement">This is <content></content></p>';

Test runner

Ready to run.

Testing in
TestOps/sec
Shadow DOM
    var shadow = document.querySelector('#shadowElement').createShadowRoot();
    var template = document.querySelector('#simpleTemplate');
    shadow.appendChild(template.content);
ready
Same behavior without Shadow DOM
    var shadow = document.querySelector('#shadowElement');
    var template = document.querySelector('#simpleTemplateDiv');
    template.querySelector('content').innerHTML = shadow.innerHTML;
    shadow.innerHTML = template.innerHTML;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.