{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 20 "" }} <div class="demo-container"> {{ if .Get "caption" }} <figure role="group" aria-labelledby="caption-{{ $uniq }}"> {{ end }} <div class="demo" id="demo-{{ $uniq }}"></div> {{ if .Get "caption" }} <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption> {{ end }} {{ if .Get "caption" }} </figure> {{ end }} <template id="template-{{ $uniq }}"> {{ .Inner }} </template> <script> (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>