event-dispatch-shadow.html (1386B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 4 <link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/invoker-utils.js"></script> 8 <body> 9 <script> 10 test(function (t) { 11 const host = document.createElement("div"); 12 document.body.append(host); 13 t.add_cleanup(() => host.remove()); 14 const shadow = host.attachShadow({ mode: "open" }); 15 const button = shadow.appendChild(document.createElement("button")); 16 const invokee = host.appendChild(document.createElement("div")); 17 button.commandForElement = invokee; 18 button.command = '--test-command'; 19 let event = null; 20 let eventTarget = null; 21 let eventSource = null; 22 invokee.addEventListener( 23 "command", 24 (e) => { 25 event = e; 26 eventTarget = e.target; 27 eventSource = e.source; 28 }, 29 { once: true }, 30 ); 31 button.click(); 32 assert_true(event instanceof CommandEvent); 33 assert_equals(event.composed, false, "composed is false"); 34 assert_equals(eventTarget, invokee, "target is invokee"); 35 assert_equals(eventSource, host, "source is host"); 36 }, "cross shadow CommandEvent retargets source to host element"); 37 </script> 38 </body>