Launch in a separate window docs

This commit is contained in:
Heydon Pickering 2017-08-06 10:52:41 +01:00
parent 2879d6c1f1
commit 7862ec6d2b
4 changed files with 45 additions and 1 deletions

View File

@ -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:

View File

@ -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>

View File

@ -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>

File diff suppressed because one or more lines are too long