inert-on-slots.html (1810B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>inert inside ShadowRoot affects slotted content</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 <div>Button 1 should be inert, and Button 2 should not be inert.</div> 12 <div id="shadow-host"> 13 <button slot="slot-1" id="button-1">Button 1 (inert)</button> 14 <button slot="slot-2" id="button-2">Button 2 (not inert)</button> 15 </div> 16 <script> 17 /* 18 Eventual flattened tree structure: 19 20 <div id="shadow-host"> 21 #shadow-root (open) 22 | <slot id="slot-1" inert> 23 : <button id="button-1">Button 1</button> <!-- slotted --> 24 | </slot> 25 | <slot id="slot-2"> 26 : <button id="button-2">Button 2</button> <!-- slotted --> 27 | </slot> 28 </div> 29 */ 30 31 const shadowHost = document.getElementById("shadow-host"); 32 const shadowRoot = shadowHost.attachShadow({ mode: "open" }); 33 34 const slot1 = document.createElement("slot"); 35 slot1.name = "slot-1"; 36 slot1.inert = true; 37 shadowRoot.appendChild(slot1); 38 39 const slot2 = document.createElement("slot"); 40 slot2.name = "slot-2"; 41 shadowRoot.appendChild(slot2); 42 43 function testCanFocus(selector, canFocus) { 44 const element = document.querySelector(selector); 45 let focusedElement = null; 46 element.addEventListener("focus", function() { focusedElement = element; }, false); 47 element.focus(); 48 assert_equals((focusedElement === element), canFocus); 49 } 50 51 test(() => { 52 testCanFocus("#button-1", false); 53 testCanFocus("#button-2", true); 54 }, "inert inside ShadowRoot affects slotted content"); 55 </script> 56 </body> 57 </html>