cupper-hugo-theme/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html

{{ $uniq := .Inner | htmlEscape | base64Encode | truncate 15 "" }}
<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" }}</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>