polyfill shadow DOM version

This commit is contained in:
Heydon Pickering 2017-07-13 11:36:42 +01:00
parent bb74d688d8
commit 8722ccc683
23 changed files with 76 additions and 41 deletions

View File

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

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Code blocks | Infusion Code blocks | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
CodePen embedding | Infusion CodePen embedding | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Color palettes | Infusion Color palettes | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Coding | Infusion Coding | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Tested using... | Infusion Tested using... | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Writing inline demos | Infusion Writing inline demos | Infusion
@ -284,12 +287,14 @@ toggle.addEventListener('click', (e) => {
<p>Here&rsquo;s a live demo of&hellip; the demo:</p> <p>Here&rsquo;s a live demo of&hellip; the demo:</p>
<div class="demo-container"> <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> <button aria-pressed="false">Toggle Me</button>
<style> <style>
@ -319,26 +324,11 @@ toggle.addEventListener('click', (e) => {
</script> </script>
</template> </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> </div>
<p><aside aria-label="note" class="note"> <aside aria-label="note" class="note">
<div> <div>
<svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729"> <svg aria-hidden="true" height="41.667" width="41.667" viewBox="0 0 41.667306 41.66729">
<use xlink:href="#info"></use> <use xlink:href="#info"></use>
@ -347,7 +337,7 @@ toggle.addEventListener('click', (e) => {
</div> </div>
</aside> </aside>
</p>
<h2 id="captioned-demos">Captioned demos</h2> <h2 id="captioned-demos">Captioned demos</h2>

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Patterns | Infusion Patterns | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Installation | Infusion Installation | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Library setup | Infusion Library setup | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Including images | Infusion Including images | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Including videos | Infusion Including videos | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Media | Infusion Media | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Serving | Infusion Serving | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Expandable sections | Infusion Expandable sections | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Writing | Infusion Writing | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Library structure | Infusion Library structure | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Markdown &amp; metadata | Infusion Markdown &amp; metadata | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
Notes &amp; warnings | Infusion Notes &amp; warnings | Infusion

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://heydon.github.io/infusion/css/prism.css" /> <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"> <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> <title>
References | Infusion References | Infusion

File diff suppressed because one or more lines are too long

View File

@ -24,6 +24,9 @@
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" /> <link rel="stylesheet" href="{{ "css/prism.css" | absURL }}" />
<link rel="stylesheet" type="text/css" href="{{ "css/styles.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> <title>
{{ block "title" . }} {{ block "title" . }}
{{ .Title }} | {{ .Site.Title }} {{ .Title }} | {{ .Site.Title }}

View File

@ -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"> <div class="demo-container">
{{ if .Get "caption" }} {{ if .Get "caption" }}
<figure role="group" aria-labelledby="caption-{{ $uniq }}"> <figure role="group" aria-labelledby="caption-{{ $uniq }}">
{{ end }} {{ end }}
<div class="demo" id="demo-{{ $uniq }}"></div> <demo-elem{{ $uniq }} class="demo" id="demo-{{ $uniq }}"></demo-elem{{ $uniq }}>
{{ if .Get "caption" }} {{ if .Get "caption" }}
<figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption> <figcaption id="caption-{{ $uniq }}">{{ .Get "caption" | markdownify }}</figcaption>
{{ end }} {{ end }}
{{ if .Get "caption" }} {{ if .Get "caption" }}
</figure> </figure>
{{ end }} {{ end }}
<template id="template-{{ $uniq }}"> <template id="template{{ $uniq }}">
{{ .Inner }} {{ .Inner | safeHTML }}
</template> </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> </div>