Launch in a separate window docs

content/patterns/coding/writing-inline-demos.md

@@ -74,6 +74,13 @@ toggle.addEventListener('click', (e) => {
 </script>
 {{</demo>}}
 
+## Launch in a separate window
+
+The "Launch in separate window" takes the demo code and pushes it to a new browser window. This serves two purposes:
+
+* It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).
+* It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and _just_ the demo code.
+
 ## Captioned demos
 
 It's possible to give your demo a caption using an accessible `<figure>` and `<figcaption>` structure. All _you_ need to do is supply a `caption` attribute. For example:

docs/patterns/coding/writing-inline-demos/index.html

@@ -357,6 +357,25 @@
     
       
 
+  <nav class="toc" aria-labelledby="toc-heading">
+    <h2 id="toc-heading">Table of contents</h2>
+    <ol>
+      
+        <li>
+          <a href="#launch-in-a-separate-window">
+            Launch in a separate window
+          </a>
+        </li>
+      
+        <li>
+          <a href="#captioned-demos">
+            Captioned demos
+          </a>
+        </li>
+      
+    </ol>
+  </nav>
+
 
     
     
@@ -473,6 +492,15 @@ toggle.addEventListener('click', (e) => {
 </div>
 
 
+<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+
+<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+
+<ul>
+<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
+<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
+</ul>
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>

docs/print-version/index.html

@@ -1732,6 +1732,15 @@ toggle.addEventListener('click', (e) => {
 </div>
 
 
+<h2 id="launch-in-a-separate-window">Launch in a separate window</h2>
+
+<p>The &ldquo;Launch in separate window&rdquo; takes the demo code and pushes it to a new browser window. This serves two purposes:</p>
+
+<ul>
+<li>It provides a fallback for browsers that do not support Shadow DOM encapsulation (a warning message will replace the inline demo).</li>
+<li>It creates an isolated test case for the demo, allowing you to run browser extensions and bookmarklets on the the demo code and <em>just</em> the demo code.</li>
+</ul>
+
 <h2 id="captioned-demos">Captioned demos</h2>
 
 <p>It&rsquo;s possible to give your demo a caption using an accessible <code>&lt;figure&gt;</code> and <code>&lt;figcaption&gt;</code> structure. All <em>you</em> need to do is supply a <code>caption</code> attribute. For example:</p>