From fcc960472697419548ab02d6de50b154bdd15b07 Mon Sep 17 00:00:00 2001
From: Stephen <stephband@cruncher.ch>
Date: Sun, 4 Aug 2024 02:56:06 +0200
Subject: [PATCH] =?UTF-8?q?Adds=20<template=20is=3D=E2=80=9Cliteral-shadow?=
 =?UTF-8?q?=E2=80=9D>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 literal-html/module.js            |  67 ++---
 literal-html/test.html            |  86 ++++--
 literal-shadow/README.md          |  37 +++
 literal-shadow/index.html         | 465 ++++++++++++++++++++++++++++++
 literal-shadow/index.html.literal |  26 ++
 literal-shadow/module.js          | 160 ++++++++++
 literal-shadow/test.html          | 198 +++++++++++++
 scope/location.js                 | 110 -------
 scope/navigate.js                 | 108 -------
 scope/scope-dom-ext.js            |  19 +-
 scope/scope-fns.js                |   2 -
 11 files changed, 979 insertions(+), 299 deletions(-)
 create mode 100644 literal-shadow/README.md
 create mode 100644 literal-shadow/index.html
 create mode 100644 literal-shadow/index.html.literal
 create mode 100644 literal-shadow/module.js
 create mode 100644 literal-shadow/test.html
 delete mode 100644 scope/location.js
 delete mode 100644 scope/navigate.js

diff --git a/literal-html/module.js b/literal-html/module.js
index 7f4855a..6556c77 100644
--- a/literal-html/module.js
+++ b/literal-html/module.js
@@ -3,58 +3,54 @@
 
 A `literal-html` template may be placed anywhere in your HTML. It is designed to
 make it easy to mix islands of dynamically rendered content into static content.
-**/
 
+A `literal-html` template is replaced in the DOM with it's own rendered content.
 
-import noop             from 'fn/noop.js';
-import Signal           from 'fn/signal.js';
-import element, { getInternals as Internals } from 'dom/element.js';
-import assignDataset    from '../modules/dom/assign-dataset.js';
-import requestData      from '../modules/request-data.js';
-import DOMRenderer      from '../modules/template.js';
-import { printError }   from '../modules/print.js';
+Note that templates declared as shadow roots with the `shadowrootmode="open"` or
+`shadowrootmode="closed"` attribute cannot also be `is="literal-html"` templates:
+the HTML parser picks them up and treats them as shadows before the custom
+element registry can upgrade them: they cannot be enhanced, sadly. However this
+library provides another template, `<template is="literal-shadow">`
+**/
 
-const assign  = Object.assign;
-const rpath   = /^(\.+|https?:\/)?\//;
-const robject = /^(\{|\[)/;
 
-const onerror = window.DEBUG ?
-    (e, element) => element.replaceWith(print(e)) :
-    noop ;
+import Signal         from 'fn/signal.js';
+import element        from 'dom/element.js';
+import assignDataset  from '../modules/dom/assign-dataset.js';
+import requestData    from '../modules/request-data.js';
+import DOMRenderer    from '../modules/template.js';
+import { printError } from '../modules/print.js';
 
 
 /* Lifecycle */
 
 // tag, template, lifecycle, properties, log
 export default element('<template is="literal-html">', {
-    construct: function() {
-        const internals = Internals(this);
+    construct: function(shadow, internals) {
         internals.initialised = false;
         internals.pushed      = false;
         internals.data        = Signal.of();
         internals.renderer    = DOMRenderer.fromTemplate(this, this.parentElement);
     },
 
-    connect: function(shadow) {
-        const internals = Internals(this);
-
+    connect: function(shadow, internals) {
         // If already initialised do nothing
         if (internals.initialised) { return; }
         internals.initialised = true;
 
-        // Observe signal listens to signal value changes and calls fn() on next
-        // tick, as well as immediately if signal already has value
-        Signal.observe(internals.data, () => {
-            const { data, renderer } = internals;
+        // Observe signal listens to signal value changes and calls fn()
+        // immediately if signal already has value, and on next tick after
+        // signal mutates
+        Signal.observe(internals.data, (data) => {
+            const { renderer } = internals;
 
-            if (!data.value) return;
-            const fragment = renderer.push(data.value);
+            if (!data) return;
+            const fragment = renderer.push(data);
 
             // Replace DOM content on first push
-            if (!internals.pushed) {
-                internals.pushed = true;
-                this.replaceWith(fragment);
-            }
+            if (internals.pushed) return;
+            internals.pushed = true;
+            this.replaceWith(fragment);
         });
 
         // If src or data was not set use data found in dataset
@@ -109,21 +105,10 @@ export default element('<template is="literal-html">', {
     },
 
 
-    /**
-    data-*=""
-    If there is no `src` or `data` attribute literal populates `data` object
-    from the dataset properties. So `data-count="3"` may be used in the template
-    with `${ data.count }`.
-
-    (If the template _does_ have a `src` attribute, the dataset proper can still
-    be accessed in (the usual way)[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset],
-    with `${ element.dataset.count }`.)
-    **/
-
     /**
     .data
 
-    The `data` property may be set with a JS object or array.
+    The `data` property may be set to an object.
 
     Getting the `data` property returns the object currently being rendered.
     Sort of. The returned data object is actually a _proxy_ of the set object.
diff --git a/literal-html/test.html b/literal-html/test.html
index 986a18f..eb923c1 100644
--- a/literal-html/test.html
+++ b/literal-html/test.html
@@ -181,16 +181,44 @@ <h3>#template-7</h3>
 <body>
     <h1>Tests</h1>
 
-    <div class="test">
+    <!--article class="test">
+        <template is="literal-html" shadowrootmode>
+            <h2>is="literal-html" shadowrootmode="open"</h2>
+            <style>
+                p {
+                    padding: 8px;
+                    background-color: plum;
+                }
+            </style>
+            <p>I am in the shadow DOM, and here is the defautl slot: "<slot></slot>".</p>
+        </template>
+        HELLO
+    </article-->
+
+    <!--article class="test">
+        <template shadowrootmode="closed">
+            <h2>is="literal-html" shadowrootmode="open"</h2>
+            <style>
+                p {
+                    padding: 8px;
+                    background-color: plum;
+                }
+            </style>
+            <p>I am in the shadow DOM.</p>
+        </template>
+    </article-->
+
+
+    <article class="test">
         <template is="literal-html">
             <h2>is="literal-html"</h2>
             <p>Test attribute renderers.</p>
             <p id="${ '✓' }">String property <code>.id="✓"</code></p>
             ${ include('#template-7', data) }
         </template>
-    </div>
+    </article>
 
-    <table class="striped-table x-bleed test">
+    <!--table class="striped-table x-bleed test">
         <thead>
             <tr>
                 <th style="width: 60%;">Expression</th>
@@ -267,13 +295,13 @@ <h2>is="literal-html"</h2>
         </tbody>
     </table>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-state="1" data-value="Hello" data-template="1">
             ${ window.data = data, include('#template-' + data.template, data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-state="1" data-value="Hello">
             <h2>is="literal-html"</h2>
             <p hidden="${ data.state }">Render counts in ().</p>
@@ -281,9 +309,9 @@ <h2>is="literal-html"</h2>
             ${ include('#template-1', data) }
             ${ include('#template-2', data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-state="1" data-value="Hello" data-template="2">
             <h2>is="literal-html"</h2>
             <p>Render counts in ().</p>
@@ -295,9 +323,9 @@ <h2>is="literal-html"</h2>
             ${ include('#template-' + data.template, data) }
             ${ include('#template-2', data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-plonk="1" data-value="Hello" data-template="1">
             <h2>Cued renders</h2>
             <p>Asynchronous stopable stream of mutations to <code>data.template</code>.
@@ -312,9 +340,9 @@ <h2>Cued renders</h2>
             <pre>(${ this.renderCount }) data.template = ${ data.template }</pre>
             ${ include('#template-' + ((data.template) % 2 + 1), data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-plonk="1" data-value="Hello" data-template="1">
             <h2>Uncued renders</h2>
             <p>Asynchronous stopable stream of include()s. From clicks. Not
@@ -328,9 +356,9 @@ <h2>Uncued renders</h2>
                 .map((e) => include('#template-' + (data.template = ((data.template - 1) % 2) + 1), data))
             }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-plonk="1" data-value="Hello" data-template="1">
             <h2>is="literal-html"</h2>
             <p>Asynchronous Stream of Promises of include()s. Render counts in ().</p>
@@ -341,9 +369,9 @@ <h2>is="literal-html"</h2>
                 .map((e) => request().then(include('#template-' + ((++data.template) % 2 + 1), data)))
             }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-value="Hello World">
             <h2>is="literal-html"</h2>
             <p>Tests whether <code>data.value</code> is rendered into the correct
@@ -354,9 +382,9 @@ <h2>is="literal-html"</h2>
             <p>An intervening paragraph.</p>
             (${ this.renderCount }) data.value = ${ data.value }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-default="2" data-value="Hello">
             <h2>is="literal-html"</h2>
             <input class="masked" type="radio" name="test-2" value="1" id="test-2-value-1" checked="$ { data.default == element.value }" />
@@ -370,17 +398,17 @@ <h2>is="literal-html"</h2>
 
             ${ include('#template-' + data.default, data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html">
             <h2>Array.map(include())</h2>
             <p></p>
             ${ [{ value: 1 }, { value: 2 }, { value: 3 }].map(include('#template-1')) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html">
             <h2>Compile and render errors</h2>
             ${ include('#template-3', data) }
@@ -388,9 +416,9 @@ <h2>Compile and render errors</h2>
             ${ include('#template-5', data) }
             ${ include('#template-6', data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html" data-value="Hello World">
             <h2>Print data</h2>
             <p>Print data to the document with <code>print(data)</code>. Note
@@ -400,9 +428,9 @@ <h2>Print data</h2>
             to an existing property triggers a fresh render.</p>
             ${ print(data) }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html">
             <h2>location</h2>
             <p>Includes a template based on the location #hash</p>
@@ -415,9 +443,9 @@ <h2>location</h2>
             <pre>(${ this.renderCount }) location.identifier = ${ window.data = data, location.identifier }</pre>
             ${ location.identifier ? include('#template-' + location.identifier, data) : '' }
         </template>
-    </div>
+    </article>
 
-    <div class="test">
+    <article class="test">
         <template is="literal-html">
             <h2>location</h2>
             <p>Includes a template based on the location pathname</p>
@@ -430,5 +458,5 @@ <h2>location</h2>
             <pre>(${ this.renderCount }) location.identifier = ${ location.pathname }</pre>
             ${ location.pathname ? include('#template-' + /\w+$/.exec(location.pathname)[0], data) : '' }
         </template>
-    </div>
+    </article-->
 </body>
diff --git a/literal-shadow/README.md b/literal-shadow/README.md
new file mode 100644
index 0000000..88b5944
--- /dev/null
+++ b/literal-shadow/README.md
@@ -0,0 +1,37 @@
+
+## `<template is="literal-shadow">`
+
+A `literal-shadow` template is replaced in the DOM with its own rendered content.
+HTML `<template>`s are allowed pretty much anywhere in a document, so
+`literal-shadow` templates enable you to freely mix islands of dynamically
+rendered content into your HTML.
+
+
+### Register `literal-shadow`
+
+Importing `./build/literal-shadow/module.js` from the [repository](https://github.com/stephband/literal/)
+registers `<template is="literal-shadow">` as a customised built-in template
+element. (Support is polyfilled in Safari, who [refuse to implement customised built-ins](https://github.com/WebKit/standards-positions/issues/97])).
+
+```html
+<script src="https://stephen.band/literal/build/literal-shadow/module.js" type="module"></script>
+```
+
+
+### Author a `literal-shadow` template
+
+```html
+<article>
+    <template is="literal-shadow">
+        <p>${ events('pointermove', body).map((e) => round(e.pageX)) }px</p>
+    </template>
+</article>
+```
+<div class="demo-block block">
+<article>
+    <template is="literal-shadow">
+        <p>${ events('pointermove', body).map((e) => round(e.pageX)) }px</p>
+    </template>
+</article>
+</div>
+
diff --git a/literal-shadow/index.html b/literal-shadow/index.html
new file mode 100644
index 0000000..55fe2fb
--- /dev/null
+++ b/literal-shadow/index.html
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<!-- Literal template "/Users/stephband/Sites/literal/literal-html/index.html.literal" -->
+
+<html lang="en">
+<head>
+    
+<title>sites</title>
+
+<meta charset="utf-8" />
+<meta name="author" content="@cruncher" />
+<meta name="description" content="localhost" />
+<meta name="viewport" content="width=device-width" />
+
+
+
+
+
+<script type="importmap"></script>
+
+<script title="load">
+    document.documentElement.className += ' js loading';
+    // window.addEventListener('DOMContentLoaded', () => document.documentElement.classList.remove('content-loading'));
+    // Wait for other load handlers to run first - Bolt does a few things on
+    // load (eg. targetable scrolls) and we want them to run before the loading
+    // class is removed
+    window.addEventListener('load', () => window.requestAnimationFrame(() => document.documentElement.classList.remove('loading')));
+</script>
+
+<script type="module">
+    import './module.js';
+</script>
+
+
+<script title="debug">
+    window.DEBUG = true;
+    window.detailsToggleStylesheet = 'https://stephen.band/literal/documentation/build/details-toggle/shadow.css';
+</script>
+
+<link rel="stylesheet" href="https://stephen.band/literal/documentation/build/module.css">
+<link rel="preload" as="style" href="https://stephen.band/literal/documentation/build/details-toggle/shadow.css">
+
+</head>
+
+<body class="4x-grid @1-6x-grid @2-7x-grid @3-9x-grid grid">
+    <header class="x1 4x @2-x2 x-stretch">
+        <h1 class="text-01">Literal <span class="text-06">0.8.3</span></h1>
+    </header>
+
+    <section class="x1 4x @2-x2 x-stretch">
+        <h2 id="template-isliteral-html"><code>&lt;template is=&quot;literal-html&quot;&gt;</code></h2>
+<p>A <code>literal-html</code> template is replaced in the DOM with its own rendered content.
+HTML <code>&lt;template&gt;</code>s are allowed pretty much anywhere in a document, so
+<code>literal-html</code> templates enable you to freely mix islands of dynamically
+rendered content into your HTML.</p>
+<h3 id="register-literal-html">Register <code>literal-html</code></h3>
+<p>Importing <code>./build/literal-html/module.js</code> from the <a href="https://github.com/stephband/literal/">repository</a>
+registers <code>&lt;template is=&quot;literal-html&quot;&gt;</code> as a customised built-in template
+element. (Support is polyfilled in Safari, who <a href="https://github.com/WebKit/standards-positions/issues/97%5D">refuse to implement customised built-ins</a>).</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://stephen.band/literal/build/literal-html/module.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+</code></pre>
+<h3 id="author-a-literal-html-template">Author a <code>literal-html</code> template</h3>
+<p>Where no <code>src</code> or <code>data</code> attribute is declared the template is rendered
+immediately with an empty <code>data</code> object. The rendered content replaces the
+template in the DOM:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>${ events('pointermove', body).map((e) => round(e.pageX)) }px<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html">
+    <p>${ events('pointermove', body).map((e) => round(e.pageX)) }px</p>
+</template>
+</div>
+
+
+<h3 id="import-json-data">Import JSON data</h3>
+<p>The <code>src</code> attribute imports data from a JSON file or JS module. Imported data
+is available inside the template as the <code>data</code> object:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../package.json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>${ data.title }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../package.json">
+    <p>${ data.title }</p>
+</template>
+</div>
+
+
+<h3 id="import-a-js-module">Import a JS module</h3>
+<p>A <code>src</code> attribute pointing to a JS module imports the default export of that
+module:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../build/data/clock.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>${ data.time.toFixed(0) }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../build/data/clock.js">
+    <p>${ data.time.toFixed(0) }</p>
+</template>
+</div>
+
+<p>A named export can be imported using a fragment identifier:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../data/cart.js#items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Items in cart: ${ data.length }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>${ data.map((item) => `${ item.quantity } x ${ item.product.name }`).join(', ') }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../data/cart.js#items">
+    <p>Items in cart: ${ data.length }</p>
+    <p>${ data.map((item) => `${ item.quantity } x ${ item.product.name }`).join(', ') }</p>
+</template>
+</div>
+
+
+<h3 id="share-data-across-templates">Share <code>data</code> across templates</h3>
+<p>Imported data objects are cached. Other templates importing from the same
+resource share the same <code>data</code> object. Changes made to <code>data</code> inside a template
+are seen by all templates rendering that data:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../package.json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>Title (first template)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${ bind(<span class="token punctuation">'</span>title<span class="token punctuation">'</span>, data) }<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../package.json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>Title (second template)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${ bind(<span class="token punctuation">'</span>title<span class="token punctuation">'</span>, data) }<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../package.json">
+    <label>Title (first template)</label>
+    <input type="text" value="${ bind('title', data) }" />
+</template>
+
+<template is="literal-html" src="../package.json">
+    <label>Title (second template)</label>
+    <input type="text" value="${ bind('title', data) }" />
+</template>
+</div>
+
+
+<h3 id="include-other-templates">Include other templates</h3>
+<p>Expressions can <code>include()</code> other templates that are in the DOM by id. Included
+templates need no special attributes but when included they are parsed as
+Literal templates.</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo-li<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>${ data.text }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">></span></span>Todo list<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>${ include('#todo-li', { text: 'Wake up' }) }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html">
+    <h5>Todo list</h5>
+    <ul>${ include('#todo-li', { text: 'Wake up' }) }</ul>
+</template>
+<template id="todo-li">
+    <li>${ data.text }</li>
+</template>
+</div>
+
+
+<p>The <code>include(src, data)</code> function is partially applicable, which is helpful for
+mapping an array of objects to template includes:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../data/todo.json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">></span></span>Todo list<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>${ data.tasks.map(include('#todo-li')) }<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../data/todo.json">
+    <h5>Todo list</h5>
+    <ul>${ data.tasks.map(include('#todo-li')) }</ul>
+</template>
+</div>
+
+<p>Note that the included template <code>#todo-li</code> is not removed from the DOM. It is
+recommended to place templates intended as includes in the document <code>&lt;head&gt;</code>.</p>
+<h3 id="show-errors-and-logs">Show errors and logs</h3>
+<p>If <code>window.DEBUG = true</code> at time the element is registered, and the stylesheet
+<code>./build/debug.css</code> is imported, some debugging features are available. Compile
+and render times are logged to the console. Open the console now to see compile
+and render logs for the Literal templates on this page.</p>
+<p>In addition a <code>literal-html</code> template will render some error messages to the
+DOM. If a <code>literal-html</code> template cannot find <code>src</code> data it is replaced with:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../does-not-exist.json<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">></span></span>Not rendered<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../does-not-exist.json">
+    <h5>Not rendered</h5>
+</template>
+</div>
+
+<p>Where <code>window.DEBUG</code> is not set, nothing is rendered. Frankly, error messaging
+and could be improved, and <a href="https://github.com/stephband/literal/">maybe you could help</a>.</p>
+<h3 id="print-debug-information">Print debug information</h3>
+<p>More debugging information can be printed to the DOM using the <code>print()</code> function:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../data/cart.js#items<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    ${ print(data) }
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template is="literal-html" src="../data/cart.js#items">
+    ${ print(data) }
+</template>
+</div>
+
+<p>Again, where <code>window.DEBUG</code> is not set, nothing is rendered.</p>
+<h3 id="an-example">An example</h3>
+<p>Turn a <code>&lt;time&gt;</code> element into a clock face. Admittedly much of this example is
+getting the CSS right, but the point it demonstrates is the suitability of
+Literal for animating a bit of style:</p>
+<pre><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock-time<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>time</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock<span class="token punctuation">"</span></span> <span class="token attr-name">datetime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>${ data.toISOString() }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hour-clock-hand   clock-hand<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token selector">transform: rotate($</span><span class="token punctuation">{</span> 30 * <span class="token punctuation">(</span>data.<span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span>   % 12<span class="token punctuation">)</span> <span class="token punctuation">}</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>${ data.getHours()   } hours<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>minute-clock-hand clock-hand<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token selector">transform: rotate($</span><span class="token punctuation">{</span> 6  * <span class="token punctuation">(</span>data.<span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> % 60<span class="token punctuation">)</span> <span class="token punctuation">}</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>${ data.getMinutes() } minutes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>second-clock-hand clock-hand<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token selector">transform: rotate($</span><span class="token punctuation">{</span> 6  * <span class="token punctuation">(</span>data.<span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span> % 60<span class="token punctuation">)</span> <span class="token punctuation">}</span>deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>${ data.getSeconds() } seconds<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>time</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>literal-html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+    ${ clock(1).start().map(() => include('#clock-time', new Date())) }
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
+</code></pre>
+<div class="demo-block block">
+<template id="clock-time">
+    <time class="clock" datetime="${ data.toISOString() }">
+        <span class="hour-clock-hand   clock-hand" style="transform: rotate(${ 30 * (data.getHours()   % 12) }deg);">${ data.getHours()   } hours</span>
+        <span class="minute-clock-hand clock-hand" style="transform: rotate(${ 6  * (data.getMinutes() % 60) }deg);">${ data.getMinutes() } minutes</span>
+        <span class="second-clock-hand clock-hand" style="transform: rotate(${ 6  * (data.getSeconds() % 60) }deg);">${ data.getSeconds() } seconds</span>
+    </time>
+</template>
+<template is="literal-html">
+    ${ clock(1).start().map(() => include('#clock-time', new Date())) }
+</template>
+</div>
+
+    </section>
+
+    
+<nav>
+    <details-toggle class="nav-details-toggle">
+        <button slot="summary" class="nav-thumb thumb">
+            <span class="open-hidden">Show</span><span class="closed-hidden">Hide</span> navigation
+            <svg viewbox="0 0 18 18">
+                <line class="stroke" x1="4.5" x2="13.5" y1="6"  y2="6"  />
+                <line class="stroke" x1="4.5" x2="13.5" y1="9"  y2="9"  />
+                <line class="stroke" x1="4.5" x2="13.5" y1="12" y2="12" />
+            <svg>
+        </button>
+        <a class=" nav-button button block" href="/literal/">
+    Literal
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+<a class="l1-nav-button nav-button button block" href="/literal/literal-html/">
+    <code>literal-html</code>
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+
+<a class="l1-nav-button nav-button button block" href="/literal/literal-element/">
+    <code>literal-element</code>
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+
+<a class="l1-nav-button nav-button button block" href="/literal/templates/">
+    Templates
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+
+<a class="l1-nav-button nav-button button block" href="/literal/templates/#template-scope">
+    Template scope
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+
+<a class="l1-nav-button nav-button button block" href="/literal/templates/#template-expressions">
+    Template expressions
+    <template is="literal-html">
+        ${ Stream
+            .merge(events('dom-navigate', window), {})
+            .map((e) => (
+                window.location.pathname === element.pathname
+                && window.location.hash === element.hash
+            ))
+            .reduce((previous, t) => {
+                if (t === previous) {
+                    return t;
+                }
+                else if (t) {
+                    element.classList.add('located');
+                }
+                else {
+                    element.classList.remove('located');
+                }
+
+                return t;
+           }, false), ''
+       }
+    </template>
+</a>
+
+
+
+    </details-toggle>
+</nav>
+
+    
+<hr class="x1 4x @2-x2 x-stretch" style="margin-top: 4.2em;" />
+
+<div class="x1 4x @2-x2 x-stretch y-start">
+    <p class="text-10">
+    Built by <a href="http://stephen.band/">Stephen Band</a> for
+    <a href="https://cruncher.ch">Cruncher</a>.
+    </p>
+
+    <p class="text-10">
+    Documentation set in <a href="https://www.swisstypefaces.com/fonts/euclid/">Euclid</a>
+    and <a href="https://github.com/evilmartians/mono">Martian Mono</a>. Fonts
+    used for documentation not included as part of the license covering the
+    use of <code>Literal</code>.
+    </p>
+</div>
+
+    
+<footer class="x1 4x @1-6x @2-7x @3-9x 4x-grid @1-6x-grid @2-7x-grid @3-9x-grid grid grid footer">
+    <div class="x1 4x @1-2x @2-x2 x-stretch y-start">
+        <h3>Elements</h3>
+        <a class="block" href="https://stephen.band/literal/literal-html/"><code>&lt;literal-html&gt;</code></a>
+        <a class="block" href="https://stephen.band/literal/literal-element/"><code>&lt;literal-element&gt;</code></a>
+        <a class="block" href="https://stephen.band/slide-show/"><code>&lt;slide-show&gt;</code></a>
+        <a class="block" href="https://stephen.band/details-toggle/"><code>&lt;details-toggle&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/rotary-input/"><code>&lt;rotary-input&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/range-input/"><code>&lt;range-input&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/y-input/"><code>&lt;y-input&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/xy-input/"><code>&lt;xy-input&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/number-control/"><code>&lt;number-control&gt;</code></a>
+        <a class="block" href="https://stephen.band/form-elements/select-control/"><code>&lt;select-control&gt;</code></a>
+    </div>
+
+    <div class="x1 4x @1-2x @1-x3 @2-x4 x-stretch y-start">
+        <h3>Tools</h3>
+        <a class="block" href="https://stephen.band/font-size/">Font-size calculator</a>
+        <a class="block" href="https://stephen.band/harmony-circle/">Harmonic circle</a>
+    </div>
+</footer>
+
+    <script type="module" src="https://stephen.band/literal/documentation/build/module.js"></script>
+
+
+    <script type="module">
+        import '../build/literal-html/module.js';
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/literal-shadow/index.html.literal b/literal-shadow/index.html.literal
new file mode 100644
index 0000000..985fd55
--- /dev/null
+++ b/literal-shadow/index.html.literal
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    ${ include("../documentation/templates/head.literal", "../../package.json") }
+</head>
+
+<body class="4x-grid @1-6x-grid @2-7x-grid @3-9x-grid grid">
+    <header class="x1 4x @2-x2 x-stretch">
+        <h1 class="text-01">Literal <span class="text-06">0.8.3</span></h1>
+    </header>
+
+    <section class="x1 4x @2-x2 x-stretch">
+        ${ include('./README.md', data) }
+    </section>
+
+    ${ include("../templates/nav.literal", "../nav.json") }
+    ${ include('../documentation/templates/credit.literal', '../package.json') }
+    ${ include('../documentation/templates/footer.literal', '../package.json') }
+    ${ include('../documentation/templates/scripts.literal', '../package.json') }
+
+    <script type="module">
+        import '../build/literal-html/module.js';
+    </script>
+</body>
+</html>
diff --git a/literal-shadow/module.js b/literal-shadow/module.js
new file mode 100644
index 0000000..e20ab0a
--- /dev/null
+++ b/literal-shadow/module.js
@@ -0,0 +1,160 @@
+/**
+<template is="literal-shadow">
+
+One `literal-shadow` template may be placed inside any element that supports
+a declarative shadowRoot. The content of the template is renderered into the
+shadow DOM of that element.
+
+A `literal-shadow` template is designed to mimic the behaviour of a template
+with a `shadowrootmode="open"` attribute, except the resulting shadow DOM is
+populated with rendered content. Technically, though, the two are not the same,
+and a little magic has to happen behind the scenes. (A `shadowrootmode` template
+is processed by the HTML parser before the custom element registry can upgrade
+it, so they are impossible to enhance with a renderer.)
+**/
+
+import Signal         from 'fn/signal.js';
+import element        from 'dom/element.js';
+import assignDataset  from '../modules/dom/assign-dataset.js';
+import requestData    from '../modules/request-data.js';
+import DOMRenderer    from '../modules/template.js';
+import { printError } from '../modules/print.js';
+
+
+/* Lifecycle */
+
+// tag, template, lifecycle, properties, log
+export default element('<template is="literal-shadow">', {
+    construct: function(shadow, internals) {
+        internals.pushed = false;
+        internals.data   = Signal.of();
+    },
+
+    connect: function(shadow, internals) {
+        // If already initialised do nothing
+        if (internals.renderer) { return; }
+        internals.renderer = DOMRenderer.fromTemplate(this, this.parentElement);
+
+        // Observe signal listens to signal value changes and calls fn()
+        // immediately if signal already value, then on next tick after signal
+        // mutates
+        Signal.observe(internals.data, (data) => {
+            const { renderer } = internals;
+
+            if (!data) return;
+            const fragment = renderer.push(data);
+
+            // Replace DOM content on first push
+            if (internals.pushed) return;
+            internals.pushed = true;
+            // EXPERIMENTAL! This is problematic, as replacing
+            // this.parentElement means `element` inside the template will
+            // no longer refer to its real parent
+            const parent = this.parentElement;
+            // Remove this template
+            this.remove();
+            // Extract the parent's contents to a fragment
+            const range = new Range();
+            range.selectNodeContents(parent);
+            const dom = range.extractContents();
+            // The parent can only be given a shadow if it is re-parsed
+            // with a declarative shadow root. We may as well use this
+            // template to parse HTML, it's here and not doing anything.
+            this.setHTMLUnsafe(parent.outerHTML.replace('></', '><template shadowrootmode="open"></template></'));
+            const element = this.content.children[0];
+            const shadow  = element.shadowRoot;
+            // Give the recreated element the original's children
+            element.append(dom);
+            // Give the recreated element's shadow the renderer content
+            shadow.append(fragment);
+            // Replace parent in the DOM with it's freshly shadowed copy
+            parent.replaceWith(element);
+        });
+
+        // If src or data was not set use data found in dataset
+        if (!internals.promise && !internals.pushed) {
+            internals.data.value = assignDataset({}, this.dataset);
+        }
+    }
+}, {
+    /**
+    src=""
+    A path to a JSON file or JS module exporting data to be rendered.
+
+    ```html
+    <template is="literal-shadow" src="./data.json">...</template>
+    <template is="literal-shadow" src="./module.js">...</template>
+    ```
+
+    Named exports are supported via an identifier:
+
+    ```html
+    <template is="literal-shadow" data="./module.js#namedExport">...</template>
+    ```
+    **/
+
+    src: {
+        attribute: function(url) {
+            this.src = url;
+        },
+
+        get: function() {
+            return Internals(this).src;
+        },
+
+        set: function(url) {
+            const internals = Internals(this);
+            internals.src = url;
+
+            // Cancel existing promise of data
+            if (internals.promise) {
+                internals.promise.cancelled = true;
+                internals.promise = undefined;
+            }
+
+            // Set internals.promise
+            const p = internals.promise = requestData(url)
+            .then((data) => {
+                if (p.cancelled) { return; }
+                this.data = data;
+            })
+            .catch((error) => element.replaceWith(printError(this, error)));
+        }
+    },
+
+
+    /**
+    .data
+
+    The `data` property may be set with a JS object or array.
+
+    Getting the `data` property returns the object currently being rendered.
+    Sort of. The returned data object is actually a _proxy_ of the set object.
+    This data proxy monitors mutations which the Literal template is already
+    observing, so changes to this data are reflected in the DOM immediately
+    (well, not quite immediately – literal renders changes on the next frame).
+    **/
+
+    data: {
+        attribute: function(json) {
+            try {
+                this.data = JSON.parse(json);
+            }
+            catch(e) {
+                throw new Error('Invalid JSON in <template is="literal-template"> data attribute: "' + json + '"');
+            }
+        },
+
+        get: function() {
+            const internals = Internals(this);
+            return internals.renderer ?
+                internals.renderer.data :
+                null ;
+        },
+
+        set: function(object) {
+            const internals = Internals(this);
+            internals.data.value = object || null;
+        }
+    }
+}, null, 'stephen.band/literal/');
diff --git a/literal-shadow/test.html b/literal-shadow/test.html
new file mode 100644
index 0000000..3d7f117
--- /dev/null
+++ b/literal-shadow/test.html
@@ -0,0 +1,198 @@
+<head>
+    <meta charset="utf-8" />
+    <meta name="author" content="Stephen" />
+    <meta name="description" content="Documentation for Literal. Literal puts JS into your HTML. Literal defines a custom include element that parses and renders templates written as JS Literals, in a small library under 15kB minified and gzipped." />
+    <meta name="viewport" content="width=device-width" />
+
+    <link rel="stylesheet" href="../module.css" />
+
+    <script>
+        window.DEBUG = true;
+    </script>
+
+    <!--script type="importmap">{
+      "imports": {
+        "dom/":  "https://stephen.band/dom/modules/",
+        "fn/":   "https://stephen.band/fn/modules/"
+      }
+    }</script-->
+
+    <script type="importmap">{
+      "imports": {
+        "dom/":  "http://localhost/dom/modules/",
+        "fn/":   "http://localhost/fn/modules/"
+      }
+    }</script>
+
+    <link rel="stylesheet" href="../../bolt/elements/table.css" />
+    <link rel="stylesheet" href="../../bolt/classes/striped-table.css" />
+
+    <style>
+        body  { column-gap: 2.5rem; margin: 1.25rem; font-family: sans-serif; }
+
+        @media (min-width: 960px) {
+            body  { columns: 2; }
+        }
+
+        table {
+            --x-gap: 0.375rem;
+        }
+
+        table > * > tr > td,
+        table > * > tr > th {
+            text-align: left;
+        }
+
+        table > tbody > tr > td,
+        table > tbody > tr > th {
+            font-weight: 400;
+            white-space: nowrap;
+        }
+
+        .test { display: block; break-inside: avoid; }
+        .test + .test { border-top: 1px solid black; margin-top: 1.5rem; }
+    </style>
+
+    <template id="template-1">
+        <h3>#template-1</h3>
+        <pre>(${ this.renderCount }) id = ${ id }</pre>
+        <pre>(${ this.renderCount }) data.value = ${ data.value }</pre>
+    </template>
+
+    <template id="template-2">
+        <h3>#template-2</h3>
+        <pre>(${ this.renderCount }) id = ${ id }</pre>
+        <pre>(${ this.renderCount }) data.value = ${ data.value }</pre>
+    </template>
+
+    <template id="template-3">
+        <h3>#template-3</h3>
+        <p>Causes a compile error in some text.</p>
+        <pre>${ cause a compile error }</pre>
+    </template>
+
+    <template id="template-4">
+        <h3>#template-4</h3>
+        <p>Causes a compile error in an attribute.</p>
+        <pre class="${ cause a compile error }"></pre>
+    </template>
+
+    <template id="template-5">
+        <h3>#template-5</h3>
+        <p>Causes a render error in some text.</p>
+        <pre>${ data.cause.a.render.error }</pre>
+    </template>
+
+    <template id="template-6">
+        <h3>#template-6</h3>
+        <p>Causes a render error in an attribute.</p>
+        <pre class="${ data.cause.a.render.error }"></pre>
+    </template>
+
+    <style>
+        :root {
+            --aqua:      #00a8a9;
+            --blue:      #3a8ab0;
+            --green:     oklch(0.77 0.2 113.57); /* #B6BD00; */
+            --yellow:    #DDB523;
+            --orange:    #ff9433;
+            --red:       #ff003a;
+            --grey:      #81868f;
+            --lightgrey: #a2a8b3;
+        }
+
+        .disabled-test,
+        .required-test {
+            /* Nullify style of buttons, inputs tested for :disabled */
+            font: inherit;
+            border-width: 0;
+            background-color: transparent;
+            padding: 0;
+            width: 100%;
+            text-align: left;
+            display: block;
+            margin: 0;
+            margin-top: 1em;
+        }
+
+        .required-test:required {
+            padding-left: 1.04em;
+        }
+
+        [id="✓"],
+        [title="✓"],
+        [itemid="✓"],
+        [data-test-attr="✓"],
+        [test-attr="✓"],
+        .disabled-test:disabled,
+        .required-test:required,
+        .empty-test:empty,
+        .content-test:not(:empty) {
+            color: var(--green);
+        }
+
+        [id="✓"]::before,
+        [title="✓"]::before,
+        [itemid="✓"]::before,
+        [data-test-attr="✓"]::before,
+        [test-attr="✓"]::before,
+        [style*="color: var(--green);"]::before,
+        .disabled-test:disabled::before,
+        .empty-test:empty::before,
+        .content-test:not(:empty)::before {
+            content: '✓ ';
+        }
+
+        .empty-test:not(:empty),
+        .content-test:empty {
+            color: var(--red);
+        }
+
+        .empty-test:not(:empty)::before {
+            content: '✘ Should be empty. ';
+        }
+
+        .content-test:empty::before {
+            content: '✘ Should have content.';
+        }
+    </style>
+
+    <template id="template-7">
+        <h3>#template-7</h3>
+        <p>Test attribute and property renderers.</p>
+        <p title="${ '✓' }">String property <code>.title="✓"</code></p>
+        <button class="disabled-test" disabled="${ '✓' }">Boolean property <code>.disabled</code></button>
+        <input class="required-test" required="${ '✓' }" value="Boolean property .required" />
+        <p data-test-attr="${ '✓' }">Dataset property <code>.dataset.testAttr="✓"</code></p>
+        <p itemid="${ '✓' }">Microdata attribute <code>itemid="✓"</code></p>
+        <p test-attr="${ '✓' }">Non-standard attribute <code>test-attr="✓"</code></p>
+        <p style="color: ${ 'var(--green)' };">Style attribute <code>style="color: \${ 'var(--green)' };"</code> test and expression</p>
+        <p style="${ 'color: var(--green);' }">Style attribute <code>style="\${ 'color: var(--green);' }"</code> single expression</p>
+        <p style="${ { color: 'var(--green)', backgroundColor: 'white' } }">Style attribute <code>style="\${ {color:'var(--green)',backgroundColor:'white'} }"</code> single expression</p>
+        <p style="${ { color: 'var(--green)', 'background-color': 'white' } }">Style attribute <code>style="\${ {color:'var(--green)','background-color':'white'} }"</code> single expression</p>
+    </template>
+
+    <script type="module">
+    import '../scope.js';
+    import LiteralHTML from './module.js';
+    </script>
+</head>
+
+<body>
+    <h1>Tests</h1>
+    <article class="test">
+        <template is="literal-shadow">
+            <h2>is="literal-shadow"</h2>
+            <style>
+                p { color: var(--green); }
+                p::before { content: '✓ '; }
+            </style>
+            <p>Shadow DOM</p>
+            <p><slot></slot></p>
+            <p><slot name="a"></slot></p>
+            <p><slot name="b">Slot with default content</slot></p>
+        </template>
+        <span>Default slot</span>
+        <span slot="a">Named slot</span>
+    </article>
+</body>
diff --git a/scope/location.js b/scope/location.js
deleted file mode 100644
index e0dd15c..0000000
--- a/scope/location.js
+++ /dev/null
@@ -1,110 +0,0 @@
-
-import Signal from 'fn/signal.js';
-
-function stripHash(hash) {
-    return hash.replace(/^#/, '');
-}
-
-const defaults = {
-    search:     '',
-    params:     {},
-    hash:       '',
-    identifier: '',
-    state:      null
-};
-
-// TODO: Deno/ESBuild don't seem to know that window.location is an object
-const wh       = window.history  || {};
-const wl       = window.location || {};
-const pathname = Signal.of(wl.pathname);
-const search   = Signal.of(wl.search);
-const hash     = Signal.of(wl.has);
-const href     = Signal.of(wl.href);
-const state    = Signal.of(JSON.stringify(wh.state));
-
-const location = {
-    /** .base **/
-    /** .path **/
-    base: '/',
-    path: '',
-
-    /** .hash **/
-    get hash() {
-        return hash.value;
-    },
-
-    /** .identifier **/
-    get identifier() {
-        return stripHash(this.hash) || defaults.identifier;
-    },
-
-    /** .params **/
-    get params() {
-        return this.search ?
-            Object.fromEntries(new URLSearchParams(this.search)) :
-            defaults.params ;
-    },
-
-    /** .pathname **/
-    get pathname() {
-        return pathname.value;
-    },
-
-    /** .name **/
-    get name() {
-        return this.pathname.slice(this.base.length);
-    },
-
-    /** .search **/
-    get search() {
-        return Object.fromEntries(new URLSearchParams(location.search));
-    },
-
-    /** .href **/
-    get href() {
-        return href.value;
-    },
-
-    /** .state **/
-    get state() {
-        return state.value;
-    }
-};
-
-export default location;
-
-function update() {
-    // Update signals
-    pathname.value = window.location.pathname;
-    search.value   = window.location.search;
-    hash.value     = window.location.hash;
-    href.value     = window.location.href;
-    state.value    = JSON.stringify(window.history.state);
-}
-
-// Synchronise root location
-//update();
-
-// Listen to load and popstate events to notify when navigation has occured
-window.addEventListener('popstate', update);
-window.addEventListener('DOMContentLoaded', update);
-
-// Clean up empty hash URLs
-window.addEventListener('hashchange', function(e) {
-    /*
-    A `hashchange` is received when:
-    - navigation via browser buttons when the hash changes
-    - navigation via typing a new hash in the URL bar
-    - navigation via history.back() and .forward() when the hash changes
-    - location.hash is set to something other than its current value
-    */
-
-    const location = window.location;
-    const history  = window.history;
-
-    // Detect navigations to # and silently remove the # from the url.
-    // Any call to replaceState or pushState in iOS opens the URL bar.
-    if (stripHash(location.hash) === '') {
-        history.replaceState(history.state, document.title, location.href.replace(/#$/, ''));
-    }
-});
diff --git a/scope/navigate.js b/scope/navigate.js
deleted file mode 100644
index 8390e6c..0000000
--- a/scope/navigate.js
+++ /dev/null
@@ -1,108 +0,0 @@
-
-import { trigger } from '../../dopm/modules/trigger.js';
-import log from './modules/log.js';
-
-const location = window.location;
-
-function triggerNavigate() {
-    return trigger('dom-navigate', window);
-}
-
-function stripHash(hash) {
-    return hash.replace(/^#/, '');
-}
-
-export default function navigate(url, state = null, scroll = false) {
-    // Coerce url string to URL object
-    url = typeof url === 'string' ?
-        /^https?\:\/\//.test(url) ?
-            new URL(url) :
-            new URL(url, location.href) :
-        url ;
-
-    // If not same origin navigate away from this site
-    if (url.origin !== location.origin) {
-        window.location.href = url;
-    }
-
-    // Make state conform to JSON serialisation - allows state to be set
-    // from objects that contain functions
-    const json = JSON.stringify(state);
-    const statechange = json !== JSON.stringify(history.state);
-
-    // If nothing has changed get on oor bike
-    if (url.href === location.href && !statechange) {
-        return;
-    }
-
-    const hash = location.hash;
-    const id   = stripHash(url.hash);
-    const path = (url.pathname + url.search + url.hash).slice(0, 96);
-
-    log('navigate()', (path.length === 96 ? path + ' …' : path) + (state ? ', ' + json : ''));
-
-    // If only the hash has changed and state is null and scroll is true,
-    // employ location.hash to navigate, giving us automatic scroll
-    if (
-        url.pathname === location.pathname
-        && url.search === location.search
-        && !statechange
-        && id
-        && url.hash !== hash
-        && scroll
-    ) {
-        location.hash = id;
-        return;
-    }
-
-    const oldhref = location.href;
-    const href = url.pathname + url.search + (id ? url.hash : '');
-    state = json ? JSON.parse(json) : state ;
-
-    // Any call to replaceState or pushState in iOS opens the URL bar, unfortunately
-    history.pushState(state, document.title, href);
-
-    // Force CSS :target selector to update when there is a new #hash.
-    // (Hackaround, CSS :target does not follow the a state of the
-    // #hash without this)
-    if (url.hash !== hash) {
-        // Move forward to the old url and back to the current location, causing
-        // :target selector to update and a popstate event.
-        history.pushState(state, document.title, oldhref);
-        history.back();
-        return true;
-    }
-
-    const defaulted = triggerNavigate();
-
-    // If a handler has called .preventDefault() defaulted is false. That's
-    // a signal that we don't want the navigate to be handled by history.
-    if (defaulted) {
-        //console.log('WOOWOO', defaulted);
-        window.location.href = url;
-    }
-
-    return !defaulted;
-}
-
-// Listen to load and popstate (and hashchange?) events to notify when
-// navigation has occured
-window.addEventListener('popstate', triggerNavigate);
-window.addEventListener('DOMContentLoaded', triggerNavigate);
-
-// Clean up empty hash URLs
-window.addEventListener('hashchange', function(e) {
-    /*
-    A `hashchange` is received when:
-    - navigation via browser buttons when the hash changes
-    - navigation via typing a new hash in the URL bar
-    - navigation via history.back() and .forward() when the hash changes
-    - location.hash is set to something other than its current value
-    */
-
-    // Detect navigations to # and silently remove the # from the url.
-    // Any call to replaceState or pushState in iOS opens the URL bar.
-    if (stripHash(location.hash) === '') {
-        history.replaceState(history.state, document.title, location.href.replace(/#$/, ''));
-    }
-});
diff --git a/scope/scope-dom-ext.js b/scope/scope-dom-ext.js
index c421357..e1e38c3 100644
--- a/scope/scope-dom-ext.js
+++ b/scope/scope-dom-ext.js
@@ -1,10 +1,11 @@
 
-export { default as delegate    } from 'dom/delegate.js';
-export { default as events      } from 'dom/events.js';
-export { default as isValid     } from 'dom/is-valid.js';
-export { default as rect        } from 'dom/rect.js';
-export { px, em, rem, vw, vh    } from 'dom/parse-length.js';
-export { default as validate    } from 'dom/validate.js';
-export { default as navigate    } from 'dom/navigate.js';
-export { default as paramify    } from './paramify.js';
-export { default as style       } from './style.js';
+export { default as delegate } from 'dom/delegate.js';
+export { default as events   } from 'dom/events.js';
+export { default as isValid  } from 'dom/is-valid.js';
+export { default as rect     } from 'dom/rect.js';
+export { px, em, rem, vw, vh } from 'dom/parse-length.js';
+export { default as validate } from 'dom/validate.js';
+export { default as navigate } from 'dom/navigate.js';
+export { default as location } from 'dom/location.js';
+export { default as paramify } from './paramify.js';
+export { default as style    } from './style.js';
diff --git a/scope/scope-fns.js b/scope/scope-fns.js
index e220d18..72c4d49 100644
--- a/scope/scope-fns.js
+++ b/scope/scope-fns.js
@@ -71,8 +71,6 @@ export { default as sum         } from 'fn/sum.js';
 export { default as Data        } from 'fn/data.js';
 export { default as Signal      } from 'fn/signal.js';
 
-export { default as location } from './location.js';
-
 
 
 //const library = {