css-scoping-shadow-nested-slot-display-override.html (937B)
1 <!DOCTYPE html> 2 <title>CSS Scoping: Dynamically overriding nested slot display value</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree"> 5 <link rel="match" href="reference/green-box.html"/> 6 <style> 7 #outerHost { 8 width: 100px; 9 height: 100px; 10 background: red; 11 } 12 </style> 13 <p>Test passes if you see a single 100px by 100px green box below.</p> 14 <div id="outerHost"> </div> 15 <script> 16 let outerRoot = outerHost.attachShadow({mode:"open"}); 17 outerRoot.innerHTML = '<div id="innerHost"><slot></slot></div>'; 18 let innerHost = outerRoot.querySelector("#innerHost"); 19 let innerRoot = innerHost.attachShadow({mode:"open"}); 20 innerRoot.innerHTML = '<slot style="display:none; border:solid 50px green"></slot>'; 21 document.body.offsetTop; 22 innerRoot.querySelector("slot").style.display = "block"; 23 </script>