From 9d592193363d64776fdb41820eb6d053ef5a6c1e Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Fri, 25 Aug 2017 10:23:47 +0100
Subject: [PATCH] non-template based solution

---
 docs/index.html                               | 23 ----------
 docs/patterns/coding/code-blocks/index.html   | 23 ----------
 .../patterns/coding/color-palettes/index.html | 23 ----------
 docs/patterns/coding/command-line/index.html  | 23 ----------
 .../patterns/coding/demo-embedding/index.html | 23 ----------
 docs/patterns/coding/file-trees/index.html    | 23 ----------
 docs/patterns/coding/index.html               | 23 ----------
 docs/patterns/coding/tested/index.html        | 23 ----------
 .../coding/writing-inline-demos/index.html    | 46 ++++++++-----------
 docs/patterns/index.html                      | 23 ----------
 docs/patterns/installation/index.html         | 23 ----------
 docs/patterns/library-setup/index.html        | 23 ----------
 .../media/including-images/index.html         | 23 ----------
 .../media/including-videos/index.html         | 23 ----------
 docs/patterns/media/index.html                | 23 ----------
 docs/patterns/printing/index.html             | 23 ----------
 docs/patterns/serving/index.html              | 23 ----------
 docs/patterns/updating/index.html             | 23 ----------
 .../writing/expandable-sections/index.html    | 23 ----------
 docs/patterns/writing/index.html              | 23 ----------
 .../writing/library-structure/index.html      | 23 ----------
 .../writing/markdown-and-metadata/index.html  | 23 ----------
 .../writing/notes-and-warnings/index.html     | 23 ----------
 docs/patterns/writing/references/index.html   | 23 ----------
 docs/patterns/writing/snippets/index.html     | 23 ----------
 .../writing/tables-of-contents/index.html     | 23 ----------
 docs/print-version/index.html                 | 46 ++++++++-----------
 docs/service-worker.js                        |  2 +-
 docs/tags/markdown/index.html                 | 23 ----------
 docs/tags/metadata/index.html                 | 23 ----------
 themes/infusion/layouts/_default/baseof.html  | 23 ----------
 themes/infusion/layouts/shortcodes/demo.html  | 27 +++++++++--
 32 files changed, 63 insertions(+), 702 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 311aee5..fa2419d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,29 +25,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html
index c0380e6..5fbfaf1 100644
--- a/docs/patterns/coding/code-blocks/index.html
+++ b/docs/patterns/coding/code-blocks/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html
index e97d6ef..40a0fed 100644
--- a/docs/patterns/coding/color-palettes/index.html
+++ b/docs/patterns/coding/color-palettes/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html
index bddbaa8..57d42ab 100644
--- a/docs/patterns/coding/command-line/index.html
+++ b/docs/patterns/coding/command-line/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/demo-embedding/index.html b/docs/patterns/coding/demo-embedding/index.html
index 54e2c6d..4b84141 100644
--- a/docs/patterns/coding/demo-embedding/index.html
+++ b/docs/patterns/coding/demo-embedding/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html
index 52ad5f0..b1dde8b 100644
--- a/docs/patterns/coding/file-trees/index.html
+++ b/docs/patterns/coding/file-trees/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html
index c93a2da..883d6c5 100644
--- a/docs/patterns/coding/index.html
+++ b/docs/patterns/coding/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index 4347b46..02a5b3f 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index 8802ce7..51c3316 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
@@ -532,8 +509,8 @@ toggle.addEventListener('click', (e) => {
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -544,12 +521,27 @@ toggle.addEventListener('click', (e) => {
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
+       
+
+
+
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.textContent = standaloneScript;
-        standalone.document.body.appendChild(template.content.cloneNode(true));
+        script.innerHTML = standaloneScript;
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
         
+        
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        
+
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index df93079..d31966d 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 5a404eb..5721332 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index f6832da..16fa408 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index 73a38ec..3f7855d 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
index 26bb5b1..afd932f 100644
--- a/docs/patterns/media/including-videos/index.html
+++ b/docs/patterns/media/including-videos/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html
index 5030fd3..0b5ca43 100644
--- a/docs/patterns/media/index.html
+++ b/docs/patterns/media/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/printing/index.html b/docs/patterns/printing/index.html
index 6619bfe..09befb2 100644
--- a/docs/patterns/printing/index.html
+++ b/docs/patterns/printing/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index 9c6b104..c663310 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/updating/index.html b/docs/patterns/updating/index.html
index 917e79b..f440ec7 100644
--- a/docs/patterns/updating/index.html
+++ b/docs/patterns/updating/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index 62fcae7..339c6fa 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index c04d863..508d1bf 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html
index cbd427b..85aee3c 100644
--- a/docs/patterns/writing/library-structure/index.html
+++ b/docs/patterns/writing/library-structure/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html
index 6fa693f..3fe986a 100644
--- a/docs/patterns/writing/markdown-and-metadata/index.html
+++ b/docs/patterns/writing/markdown-and-metadata/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index e85eadb..2d6d875 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html
index 1007b82..95b053d 100644
--- a/docs/patterns/writing/references/index.html
+++ b/docs/patterns/writing/references/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html
index ec210a1..b02eb6c 100644
--- a/docs/patterns/writing/snippets/index.html
+++ b/docs/patterns/writing/snippets/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/patterns/writing/tables-of-contents/index.html b/docs/patterns/writing/tables-of-contents/index.html
index a734bb8..9f65889 100644
--- a/docs/patterns/writing/tables-of-contents/index.html
+++ b/docs/patterns/writing/tables-of-contents/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/print-version/index.html b/docs/print-version/index.html
index 2afe476..4ce860e 100644
--- a/docs/print-version/index.html
+++ b/docs/print-version/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
@@ -1906,8 +1883,8 @@ toggle.addEventListener('click', (e) => {
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-414e06a48e755bf9e43e5e2596f9ea7a\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -1918,12 +1895,27 @@ toggle.addEventListener('click', (e) => {
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
+       
+
+
+
       var launchButton = document.querySelector('[data-launch="js-demo-414e06a48e755bf9e43e5e2596f9ea7a"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
-        script.textContent = standaloneScript;
-        standalone.document.body.appendChild(template.content.cloneNode(true));
+        script.innerHTML = standaloneScript;
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
         
+        
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        
+
         standalone.document.title = 'demo ' + "414e06a48e755bf9e43e5e2596f9ea7a";
       });
     })();
diff --git a/docs/service-worker.js b/docs/service-worker.js
index cdaafef..c25faa6 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","6cb827927cbd01ec67b571d394300ab4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","1ce6a58335e626f96087e6b5de22cbcc"],["index.xml","aa6028f64716d4919ef11a5f42caec16"],["js/dom-scripts.js","03ee0619745b300ec62d3ba908375dac"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","238a0121f2ebf55e137c05f40d3ec335"],["patterns/coding/code-blocks/index.html","e0ae855502e582329e74e32660f87b8a"],["patterns/coding/color-palettes/index.html","6f2b6747bc5c7a9c43c3107a7fd4dbcd"],["patterns/coding/command-line/index.html","90b34d676db4977f4bddfd60538e67ff"],["patterns/coding/demo-embedding/index.html","2491ecdcb8227ca08aa4eb293cc4da45"],["patterns/coding/file-trees/index.html","c11c6afa780151b085c3d8b387a7773e"],["patterns/coding/index.html","98793c6a965ad9f7e67bb0c9c7be16cf"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","801fe13831285af3145c49a555067d0f"],["patterns/coding/writing-inline-demos/index.html","f666b2243748a535d8be043a31a30c9d"],["patterns/index.html","827fe0a8e593d1fe0efcdcbabbb03c90"],["patterns/index.xml","b49d0a779f7b22a9169bcc606dcaace7"],["patterns/installation/index.html","c635112181231b747b4aecfa0f517a0e"],["patterns/library-setup/index.html","f2b90a3c50e8ab64c434e4d3f786e0f6"],["patterns/media/including-images/index.html","4ebfb3fca81888039119a079146d075a"],["patterns/media/including-videos/index.html","2e9cf6b8cbf7bbaf1ce7f6f71654a196"],["patterns/media/index.html","d273de94e7af2c98adc6a902770b8c8a"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","c5beb6585ecc0c5710fafaa0c4f89f17"],["patterns/serving/index.html","690a614af1148d493f7d6d279569336b"],["patterns/updating/index.html","fad14677a10ef5e4ed8cb0aa64920d3f"],["patterns/writing/expandable-sections/index.html","556633f98823eb4ae7d7ab168b5cdc7e"],["patterns/writing/index.html","f52f82c45c3b8222b3d34643ba931ba9"],["patterns/writing/index.xml","691ef930c108f300ab46d63e88be2b55"],["patterns/writing/library-structure/index.html","89ab743eeb50aaf12e9ffc2c5c1470b7"],["patterns/writing/markdown-and-metadata/index.html","a51562420aa4384bd2ce9c6e4441cb50"],["patterns/writing/notes-and-warnings/index.html","a97c32c7f7decbfc2f89608171b04b29"],["patterns/writing/references/index.html","c0a52c9526eab9e023bdf4ea418d3879"],["patterns/writing/snippets/index.html","143dc6301fd161e497bcfbf88c2a1531"],["patterns/writing/tables-of-contents/index.html","7f32c5c07e1321f727922aa69b7f3b62"],["print-version/index.html","f07b587cfecfe27204d155531192e85f"],["sitemap.xml","008aff2a4a550a926265f2445ae9e3a9"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","4ea10ede1b71b09368847e69e019f37f"],["tags/markdown/index.xml","7df48ac337fc803de40eec42599a31cd"],["tags/metadata/index.html","1e2f8f009114222dcc409785bb3b9f85"],["tags/metadata/index.xml","eca9cfe9cd6561660ff341d5ded73b06"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","6cb827927cbd01ec67b571d394300ab4"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","a897b4e5dc6f2abeafbcd236b026df0f"],["index.xml","aa6028f64716d4919ef11a5f42caec16"],["js/dom-scripts.js","03ee0619745b300ec62d3ba908375dac"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","238a0121f2ebf55e137c05f40d3ec335"],["patterns/coding/code-blocks/index.html","e4bb44134ed7d1d296a2134aede56d83"],["patterns/coding/color-palettes/index.html","d15a959a7805a1181e359fa014eded9c"],["patterns/coding/command-line/index.html","720a5cb7b7b516af1702750fa64cb1c1"],["patterns/coding/demo-embedding/index.html","af9c1cfb9bf0b8ce69afa51f88032457"],["patterns/coding/file-trees/index.html","91183a28b44e5245fcd599778458d57b"],["patterns/coding/index.html","2938fc3e06a29ef33fcbc5f708f15a2e"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","db988bc6e30d7b30e702898f017b92e2"],["patterns/coding/writing-inline-demos/index.html","c4e47f8b70780793faf03ef90931e5ec"],["patterns/index.html","7d5c12eb3a2dff2cbf90612885d8eaab"],["patterns/index.xml","b49d0a779f7b22a9169bcc606dcaace7"],["patterns/installation/index.html","2565fc73bd1620281a5546be8471e1fc"],["patterns/library-setup/index.html","abb89b03bda6e9392beba903caa3b115"],["patterns/media/including-images/index.html","4189d5f05fc0c9f515cf97dab0dab0d1"],["patterns/media/including-videos/index.html","d0638e69bd0e0022da19eb7d8b8996dc"],["patterns/media/index.html","2fade529c06841b9f6e321f78f23b481"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","dd69050f3c160a661df26f1b5033e6aa"],["patterns/serving/index.html","3a05e4c885cdb34ad64339fa73419e03"],["patterns/updating/index.html","7ebea6f97522bdb0ea836ea630e42b00"],["patterns/writing/expandable-sections/index.html","fbe49e6f82a26640a33d3629b593d724"],["patterns/writing/index.html","9f999d15bfc2b36447621600b3a79a7e"],["patterns/writing/index.xml","691ef930c108f300ab46d63e88be2b55"],["patterns/writing/library-structure/index.html","ac00ee7f979a74b1880a46a4e616140d"],["patterns/writing/markdown-and-metadata/index.html","a0abe1582b58d3698e3260d62f55c452"],["patterns/writing/notes-and-warnings/index.html","eec66a210fb643c8bc3801c44ddcb2a9"],["patterns/writing/references/index.html","a03d7d8c2c5781e0dfc94f795fb4734d"],["patterns/writing/snippets/index.html","0f95c84b1ea965fc0a15880fd8e262d1"],["patterns/writing/tables-of-contents/index.html","0e4bb1f94237312b5cbdff6f213463e2"],["print-version/index.html","53a83146483bd373c604f570d02cc060"],["sitemap.xml","008aff2a4a550a926265f2445ae9e3a9"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","ae5af8e9e52ea0aefd82c7fc9da79c14"],["tags/markdown/index.xml","7df48ac337fc803de40eec42599a31cd"],["tags/metadata/index.html","4003e1dc2257997c3645348aa0fa3cf3"],["tags/metadata/index.xml","eca9cfe9cd6561660ff341d5ded73b06"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/docs/tags/markdown/index.html b/docs/tags/markdown/index.html
index 0c5b2c9..fa106e3 100644
--- a/docs/tags/markdown/index.html
+++ b/docs/tags/markdown/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/docs/tags/metadata/index.html b/docs/tags/metadata/index.html
index d9eebb8..4ec5b88 100644
--- a/docs/tags/metadata/index.html
+++ b/docs/tags/metadata/index.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="https://thepaciellogroup.github.io/infusion/css/prism.css">
     <link rel="stylesheet" type="text/css" href="https://thepaciellogroup.github.io/infusion/css/styles.css">
-    <script>
-       
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html
index 44c3c43..3b46ac1 100644
--- a/themes/infusion/layouts/_default/baseof.html
+++ b/themes/infusion/layouts/_default/baseof.html
@@ -24,29 +24,6 @@
     <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet" media="none" onload="this.media='all';">
     <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}">
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
-    <script>
-      /* Template element polyfill */
-      (function templatePolyfill(document) {
-        if ('content' in document.createElement('template')) {
-          return false;
-        }
-
-        var templates = document.getElementsByTagName('template');
-        var plateLen = templates.length;
-
-        for (var x = 0; x < plateLen; ++x) {
-          var template = templates[x];
-          var content = template.childNodes;
-          var fragment = document.createDocumentFragment();
-
-          while (content[0]) {
-            fragment.appendChild(content[0]);
-          }
-
-          template.content = fragment;
-        }
-      })(document);
-    </script>
     <style id="inverter" media="none">
       html { filter: invert(100%) }
       * { background-color: inherit }
diff --git a/themes/infusion/layouts/shortcodes/demo.html b/themes/infusion/layouts/shortcodes/demo.html
index 7e57377..f03ada3 100644
--- a/themes/infusion/layouts/shortcodes/demo.html
+++ b/themes/infusion/layouts/shortcodes/demo.html
@@ -23,8 +23,8 @@
       var script = template.content.querySelector('script');
 
       if (script) {
-        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })()';
-        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})()';
+        var standaloneScript = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + script.textContent + ' })();';
+        var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + script.textContent + '})();';
         script.textContent = wrappedScript;
       }
 
@@ -35,7 +35,7 @@
         root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> A browser supporting Shadow DOM is needed to run encapsulated demos. You can launch the demo in a separate window ↓</p>';
       }
 
-      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
+      /*var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
       launchButton.addEventListener('click', function () {
         var standalone = window.open();
         script.textContent = standaloneScript;
@@ -43,6 +43,27 @@
         {{ if .Get "backgroundColor" }}
           standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
         {{ end }}
+        standalone.document.title = 'demo ' + {{ $uniq }};
+      });*/
+      var launchButton = document.querySelector('[data-launch="js-demo-{{ $uniq }}"]');
+      launchButton.addEventListener('click', function () {
+        var standalone = window.open();
+        script.innerHTML = standaloneScript;
+        var demoDiv = document.createElement('div');
+        demoDiv.innerHTML = template.innerHTML;
+        standalone.document.body.appendChild(demoDiv);
+        
+        // For activating the script :-(
+        var newScript = standalone.document.createElement('script');
+        var oldScript = standalone.document.querySelector('script');
+        newScript.textContent = oldScript.textContent;
+        oldScript.parentNode.removeChild(oldScript);
+        standalone.document.body.appendChild(newScript);
+
+        {{ if .Get "backgroundColor" }}
+          standalone.document.body.style.backgroundColor = {{ .Get "backgroundColor" | safeCSS }};
+        {{ end }}
+
         standalone.document.title = 'demo ' + {{ $uniq }};
       });
     })();