tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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>