tor-browser

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

quotes-slot-scoping.html (961B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>Quote scope Shadow DOM and SLOT</title>
      5    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
      6    <link rel="help" href="https://www.w3.org/TR/css-content-3/#quote-values">
      7    <link rel="match" href="quotes-slot-scoping-ref.html">
      8  </head>
      9 
     10  <body>
     11    <div id="host">
     12      <q slot="quote">Quote</q>
     13    </div>
     14 
     15    <script>
     16      function makeStyle() {
     17        let style = document.createElement('style');
     18        style.textContent = `
     19            q {
     20              quotes: '1' '1' '2' '2' '3' '3';
     21            }
     22        `;
     23         return style;
     24      }
     25      document.body.appendChild(makeStyle());
     26 
     27      const shadowRoot = document
     28           .getElementById('host')
     29           .attachShadow({mode: 'open'});
     30      shadowRoot.innerHTML = `
     31      <q>
     32        <slot name="quote"></slot>
     33      </q>
     34      `;
     35      shadowRoot.appendChild(makeStyle());
     36    </script>
     37  </body>
     38 </html>