shadow-reassign-dynamic-003.html (755B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree"> 5 <div id="host"><span id="slotted">This text should be green.</span></div> 6 <script> 7 const root = host.attachShadow({mode:"open"}); 8 root.innerHTML = '<slot name="nomatch" style="color:green"></slot><slot style="color:red"></slot>'; 9 10 test(() => { 11 assert_equals(getComputedStyle(slotted).color, "rgb(255, 0, 0)"); 12 }, "Initial computed color."); 13 14 test(() => { 15 root.querySelector("slot").removeAttribute("name"); 16 assert_equals(getComputedStyle(slotted).color, "rgb(0, 128, 0)"); 17 18 }, "Computed color after re-slotting."); 19 </script>