declarative-after-attachshadow.html (1626B)
1 <!DOCTYPE html> 2 <title>Declarative Shadow DOM after attachShadow</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 let gotHost = false; 11 function myObserver(mutationsList, observer) { 12 for (let mutation of mutationsList) { 13 for (let n of mutation.addedNodes) { 14 if (n.id === 'host') { 15 gotHost = true; 16 const shadowRoot = n.attachShadow( {mode: 'closed'}); 17 assert_true(!!shadowRoot, 'Unable to attach shadow imperatively'); 18 } 19 } 20 } 21 } 22 const observer = new MutationObserver(myObserver); 23 observer.observe(document.body, { childList: true, subtree: true }); 24 assert_false(gotHost, 'No mutations yet'); 25 </script> 26 27 <div id=host> 28 <!-- Ensure observer runs at this point (https://github.com/web-platform-tests/wpt/issues/35393) --> 29 <script> // some content, which shouldn't be necessary </script> 30 <template shadowrootmode=open> 31 Content 32 <slot>Fallback</slot> 33 </template> 34 </div> 35 36 <script> 37 test(t => { 38 t.add_cleanup(function() { observer.disconnect(); }); 39 assert_true(gotHost); 40 let host = document.querySelector('#host'); 41 let template = host.querySelector('template'); 42 assert_true(!!template, 'Declarative shadow attach should fail, so template should be left over'); 43 assert_true(!host.shadowRoot, 'Shadow root should be closed (from attachShadow call)'); 44 }, 'Declarative Shadow DOM: declarative shadow should fail if attachShadow() already called'); 45 </script> 46 </body>