slotted-text-with-flex.html (697B)
1 <!DOCTYPE html> 2 <title>Test dynamic updates with text slotted into flexbox</title> 3 <link rel="help" href="https://drafts.csswg.org/css-scoping/"> 4 <div id="test"> 5 <template shadowrootmode=open> 6 <style> 7 .content { 8 border: 2px solid blue; 9 display: flex; 10 } 11 </style> 12 <div class="content"> 13 <slot></slot> 14 <div id="toggle">This too.</div> 15 </div> 16 </template> 17 This should be visible. 18 </div> 19 20 <script> 21 document.body.offsetLeft; 22 const toggle = test.shadowRoot.querySelector("#toggle"); 23 toggle.style.display = "none"; 24 document.body.offsetLeft; 25 toggle.style.display = "block"; 26 </script>