IIFE wrapping to enable multiple demo instances

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

@@ -73,6 +73,36 @@ toggle.addEventListener('click', (e) => {
 </script>
 {{</demo>}}
 
+{{<demo>}}
+<button aria-pressed="false">Toggle Me</button>
+<style>
+button {
+    background: blue;
+    color: white;
+    border: 0;
+    font-size: 1rem;
+    font-family: serif;
+    padding: 0.5em 1em;
+    border-right: 5px solid #000;
+    border-bottom: 5px solid #000;
+}
+
+[aria-pressed="true"] {
+  border: 0;
+  border-top: 5px solid #000;
+  border-left: 5px solid #000;
+}
+</style>
+<script>
+var toggle = demo.querySelector('[aria-pressed]');
+
+toggle.addEventListener('click', (e) => {  
+  let pressed = e.target.getAttribute('aria-pressed') === 'true';
+  e.target.setAttribute('aria-pressed', !pressed);
+});
+</script>
+{{</demo>}}
+
 ## 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

@@ -324,10 +324,53 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <script>ShadyCSS.prepareTemplate(template34e756fc953627a51e20255208dbdb57, 'demo-elem34e756fc953627a51e20255208dbdb57'); var script = template34e756fc953627a51e20255208dbdb57.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem34e756fc953627a51e20255208dbdb57').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template34e756fc953627a51e20255208dbdb57.content.cloneNode(true)); } } customElements.define('demo-elem34e756fc953627a51e20255208dbdb57', DemoElem);</script>
+  <script>(function() { ShadyCSS.prepareTemplate(template34e756fc953627a51e20255208dbdb57, 'demo-elem34e756fc953627a51e20255208dbdb57'); var script = template34e756fc953627a51e20255208dbdb57.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem34e756fc953627a51e20255208dbdb57').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template34e756fc953627a51e20255208dbdb57.content.cloneNode(true)); } } customElements.define('demo-elem34e756fc953627a51e20255208dbdb57', DemoElem); })();</script>
 </div>
 
 
+<p>
+
+
+<div class="demo-container">
+  
+      <demo-elem5b7c6e1c905eca8144b27f3bc6737574 class="demo" id="demo-5b7c6e1c905eca8144b27f3bc6737574"></demo-elem5b7c6e1c905eca8144b27f3bc6737574>
+      
+  
+  <template id="template5b7c6e1c905eca8144b27f3bc6737574">
+      
+<button aria-pressed="false">Toggle Me</button>
+<style>
+button {
+    background: blue;
+    color: white;
+    border: 0;
+    font-size: 1rem;
+    font-family: serif;
+    padding: 0.5em 1em;
+    border-right: 5px solid #000;
+    border-bottom: 5px solid #000;
+}
+
+[aria-pressed="true"] {
+  border: 0;
+  border-top: 5px solid #000;
+  border-left: 5px solid #000;
+}
+</style>
+<script>
+var toggle = demo.querySelector('[aria-pressed]');
+
+toggle.addEventListener('click', (e) => {  
+  let pressed = e.target.getAttribute('aria-pressed') === 'true';
+  e.target.setAttribute('aria-pressed', !pressed);
+});
+</script>
+
+  </template>
+  <script>(function() { ShadyCSS.prepareTemplate(template5b7c6e1c905eca8144b27f3bc6737574, 'demo-elem5b7c6e1c905eca8144b27f3bc6737574'); var script = template5b7c6e1c905eca8144b27f3bc6737574.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem5b7c6e1c905eca8144b27f3bc6737574').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template5b7c6e1c905eca8144b27f3bc6737574.content.cloneNode(true)); } } customElements.define('demo-elem5b7c6e1c905eca8144b27f3bc6737574', DemoElem); })();</script>
+</div>
+</p>
+
 <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>

themes/infusion/layouts/shortcodes/demo.html

@@ -1,6 +1,6 @@
 {{ $uniq := .Inner | htmlEscape | md5 | lower }}
 {{ $template := printf "template-%s" $uniq }}
-{{ $string := replace "<script>ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem);</script>" "%s" $uniq }}
+{{ $string := replace "<script>(function() { ShadyCSS.prepareTemplate(template%s, 'demo-elem%s'); var script = template%s.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elem%s').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(template%s.content.cloneNode(true)); } } customElements.define('demo-elem%s', DemoElem); })();</script>" "%s" $uniq }}
 <div class="demo-container">
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">