cupper-hugo-theme/themes/infusion/layouts/shortcodes/demo.html

{{ $uniq := .Inner | htmlEscape | md5 | lower }}
<div class="demo-container">
  {{ if .Get "caption" }}
  <figure role="group" aria-labelledby="caption-{{ $uniq }}">
  {{ end }}
      <div class="demo-inner" {{ if .Get "backgroundColor" }}style="background-color: {{ .Get "backgroundColor" | safeCSS }}"{{ end }}>
        <div class="demo" id="js-demo-{{ $uniq }}"></div>
        <button data-launch="js-demo-{{ $uniq }}">Launch in separate window</button>
      </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('js-demo-{{ $uniq }}');
      var template = document.getElementById('template-{{ $uniq }}');
      var demoDiv = document.createElement('div');
      demoDiv.innerHTML = template.innerHTML;
      var standaloneScript = demoDiv.querySelector('script');
      standaloneScript.textContent = '(function() { document.getElementsByTagName(\'html\')[0].setAttribute(\'lang\', \'en\'); var demo = document; ' + standaloneScript.textContent + ' })();';

      if (document.head.attachShadow) {
        var templateScript = template.content.querySelector('script');
        if (templateScript) {
          var wrappedScript = '(function() { var demo = document.getElementById(\'js-demo-{{ $uniq }}\').shadowRoot;' + templateScript.textContent + '})();';
          templateScript.textContent = wrappedScript;
        }
        root.attachShadow({mode: 'open'});
        root.shadowRoot.appendChild(document.importNode(template.content, true));
      } else {
        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 }}"]');
      launchButton.addEventListener('click', function () {
        var standalone = window.open();
        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 }};
      });
    })();
    /*(function() {
      var root = document.getElementById('js-demo-{{ $uniq }}');
      var template = document.getElementById('template-{{ $uniq }}');
      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 + '})();';
        script.textContent = wrappedScript;
      }

      if (document.head.attachShadow) {
        root.attachShadow({mode: 'open'});
        root.shadowRoot.appendChild(document.importNode(template.content, true));
      } else {
        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 }}"]');
      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 }};
      });
    })();*/
  </script>
</div>