innerhtml-on-ordinary-template.html (2104B)
1 <!DOCTYPE html> 2 <title>Declarative Shadow DOM innerHTML</title> 3 <link rel='author' href='mailto:masonf@chromium.org'> 4 <link rel='help' href='https://github.com/whatwg/dom/issues/831'> 5 <script src='/resources/testharness.js'></script> 6 <script src='/resources/testharnessreport.js'></script> 7 8 <body> 9 <script> 10 function myObserver(mutationsList) { 11 for (let mutation of mutationsList) { 12 for (let n of mutation.addedNodes) { 13 if (n.id === 'has-imperative-root') { 14 const shadowRoot = n.attachShadow( {mode: 'open'}); 15 } 16 } 17 } 18 } 19 var observer = new MutationObserver(myObserver); 20 observer.observe(document.body, { childList: true, subtree: true }); 21 </script> 22 23 <div id='has-imperative-root'> 24 <!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) --> 25 <script> // some content, which shouldn't be necessary </script> 26 <!-- The imperative shadow root should be attached now. --> 27 <template id=ordinarytemplate shadowrootmode=open> 28 <span id=toreplace>This should get removed</span> 29 </template> 30 <script> 31 ordinarytemplate.innerHTML = '<span id=replaced>This should replace template contents</span>'; 32 </script> 33 </div> 34 35 <script> 36 test(t => { 37 t.add_cleanup(function() { observer.disconnect(); }); 38 let host = document.querySelector('#has-imperative-root'); 39 let shadowroot = host.shadowRoot; 40 assert_true(!!shadowroot, 'Shadow root should be present'); 41 assert_false(shadowroot.hasChildNodes(), 'Shadow root should not contain any children'); 42 let template = host.querySelector('template#ordinarytemplate'); 43 assert_true(!!template, 'Since host has imperative root, <template> should be left over'); 44 assert_false(template.hasChildNodes(),'template should not have direct children'); 45 assert_true(!!template.content.querySelector('#replaced'),'The innerHTML replacement content should be present'); 46 assert_true(!template.content.querySelector('#toreplace'),'The old replaced content should not be present'); 47 }, 'Declarative Shadow DOM: innerHTML should work on <template shadowroot> that is left over'); 48 </script> 49 </body>