polyfill shadow DOM version

docs/index.html

@@ -25,6 +25,7 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
     <title>
       
   Infusion

docs/patterns/coding/code-blocks/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Code blocks | Infusion

docs/patterns/coding/codepen-embedding/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         CodePen embedding | Infusion

docs/patterns/coding/color-palettes/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Color palettes | Infusion

docs/patterns/coding/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Coding | Infusion

docs/patterns/coding/tested/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Tested using... | Infusion

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

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Writing inline demos | Infusion
@@ -284,12 +287,14 @@ toggle.addEventListener('click', (e) => {
 <p>Here&rsquo;s a live demo of&hellip; the demo:</p>
 
 
+
+
 <div class="demo-container">
   
-      <div class="demo" id="demo-CiZsdDtidXR0b24gYXJp"></div>
+      <demo-elemcizsddtidxr0b24gyxjp class="demo" id="demo-cizsddtidxr0b24gyxjp"></demo-elemcizsddtidxr0b24gyxjp>
       
   
-  <template id="template-CiZsdDtidXR0b24gYXJp">
+  <template id="templatecizsddtidxr0b24gyxjp">
       
 <button aria-pressed="false">Toggle Me</button>
 <style>
@@ -319,26 +324,11 @@ toggle.addEventListener('click', (e) => {
 </script>
 
   </template>
-  <script>
+  <script>ShadyCSS.prepareTemplate(templatecizsddtidxr0b24gyxjp, 'demo-elemcizsddtidxr0b24gyxjp'); var script = templatecizsddtidxr0b24gyxjp.content.querySelector('script'); if (script) { script.textContent = `(function() { var demo = document.querySelector('demo-elemcizsddtidxr0b24gyxjp').shadowRoot; ${script.textContent} })()` } class DemoElem extends HTMLElement { connectedCallback() { ShadyCSS.styleElement(this); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(templatecizsddtidxr0b24gyxjp.content.cloneNode(true)); } } customElements.define('demo-elemcizsddtidxr0b24gyxjp', DemoElem);</script>
-    (function() {
-      var root = document.getElementById('demo-CiZsdDtidXR0b24gYXJp');
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
-        var template = document.getElementById('template-CiZsdDtidXR0b24gYXJp');
-        var script = template.content.querySelector('script');
-        if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-CiZsdDtidXR0b24gYXJp\').shadowRoot; ${script.textContent} })()`
-        }
-        root.shadowRoot.appendChild(document.importNode(template.content, true));
-      } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
-      }
-    })();
-  </script>
 </div>
 
 
-<p><aside aria-label="note" class="note">
+<aside aria-label="note" class="note">
   <div>
     <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
       <use xlink:href="#info"></use>
@@ -347,7 +337,7 @@ toggle.addEventListener('click', (e) => {
 
   </div>
 </aside>
-</p>
+
 
 <h2 id="captioned-demos">Captioned demos</h2>
 

docs/patterns/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Patterns | Infusion

docs/patterns/installation/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Installation | Infusion

docs/patterns/library-setup/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Library setup | Infusion

docs/patterns/media/including-images/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Including images | Infusion

docs/patterns/media/including-videos/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Including videos | Infusion

docs/patterns/media/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Media | Infusion

docs/patterns/serving/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Serving | Infusion

docs/patterns/writing/expandable-sections/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Expandable sections | Infusion

docs/patterns/writing/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Writing | Infusion

docs/patterns/writing/library-structure/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Library structure | Infusion

docs/patterns/writing/markdown-and-metadata/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Markdown &amp; metadata | Infusion

docs/patterns/writing/notes-and-warnings/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         Notes &amp; warnings | Infusion

docs/patterns/writing/references/index.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" />
     <link rel="stylesheet" type="text/css" href="https://heydon.github.io/infusion/css/styles.css">
+    
+      <script src="https://heydon.github.io/infusion/js/webcomponents.js"></script>
+    
     <title>
       
         References | Infusion

themes/infusion/layouts/_default/baseof.html

@@ -24,6 +24,9 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" />
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
+    {{ if eq .Type "patterns" }}
+      <script src="{{ "js/webcomponents.js" | absURL }}"></script>
+    {{ end }}
     <title>
       {{ block "title" . }}
         {{ .Title }} | {{ .Site.Title }}

themes/infusion/layouts/shortcodes/demo.html

@@ -1,32 +1,19 @@
-{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }}
+{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" | 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 }}
 <div class="demo-container">
   {{ if .Get "caption" }}
   <figure role="group" aria-labelledby="caption-{{ $uniq }}">
   {{ end }}
-      <div class="demo" id="demo-{{ $uniq }}"></div>
+      <demo-elem{{ $uniq }} class="demo" id="demo-{{ $uniq }}"></demo-elem{{ $uniq }}>
       {{ if .Get "caption" }}
           <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
       {{ end }}
   {{ if .Get "caption" }}
   </figure>
   {{ end }}
-  <template id="template-{{ $uniq }}">
+  <template id="template{{ $uniq }}">
-      {{ .Inner }}
+      {{ .Inner | safeHTML }}
   </template>
-  <script>
+  {{ $string | safeHTML }}
-    (function() {
-      var root = document.getElementById('demo-{{ $uniq }}');
-      if (document.head.attachShadow) {
-        root.attachShadow({mode: 'open'});
-        var template = document.getElementById('template-{{ $uniq }}');
-        var script = template.content.querySelector('script');
-        if (script) {
-          script.textContent = `(function() { var demo = document.getElementById(\'demo-{{ $uniq }}\').shadowRoot; ${script.textContent} })()`
-        }
-        root.shadowRoot.appendChild(document.importNode(template.content, true));
-      } else {
-        root.innerHTML = '<p class="site-error"><strong style="font-weight:bold">Site error:</strong> Shadow DOM is needed to display encapsulated demos. The browser does not have an issue with the demo code itself.</p>';
-      }
-    })();
-  </script>
 </div>