diff --git a/literal-html/module.js b/literal-html/module.js
index 3fee170..571c987 100644
--- a/literal-html/module.js
+++ b/literal-html/module.js
@@ -10,7 +10,7 @@ import noop             from '../../fn/modules/noop.js';
 import Signal           from '../../fn/modules/signal.js';
 import element, { getInternals as Internals } from '../../dom/modules/element.js';
 import requestData      from '../modules/request-data.js';
-import Template from '../modules/template.js';
+import Template         from '../modules/template.js';
 import print            from '../modules/scope/print.js';
 
 const assign  = Object.assign;
@@ -65,17 +65,18 @@ export default element('<template is="literal-html">', {
         if (internals.initialised) { return; }
         internals.initialised = true;
 
-        // Compute signal listens to changs
+        // 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;
 
             if (!data.value) return;
-            renderer.push(data.value);
+            const fragment = renderer.push(data.value);
 
             // Replace DOM content on first push
             if (!internals.pushed) {
                 internals.pushed = true;
-                this.replaceWith(renderer.content);
+                this.replaceWith(fragment);
             }
         });
 
diff --git a/literal-html/test.html b/literal-html/test.html
index 23f5b92..e1fa1e9 100644
--- a/literal-html/test.html
+++ b/literal-html/test.html
@@ -12,6 +12,17 @@
 
     <style>
         body  { columns: 2; column-gap: 2.5rem; margin: 1.25rem; font-family: sans-serif; }
+
+        table > * > tr > td,
+        table > * > tr > th {
+            text-align: left;
+        }
+
+        table > tbody > tr > td,
+        table > tbody > tr > th {
+            font-weight: 400;
+        }
+
         .test { display: block; break-inside: avoid; }
         .test + .test { border-top: 1px solid black; margin-top: 1.5rem; }
     </style>
@@ -54,32 +65,144 @@ <h3>#template-6</h3>
 <body>
     <h1>Tests</h1>
 
-    <div class="test">
+    <!--table class="striped-table x-bleed test">
+        <thead>
+            <tr>
+                <th>Expression</th>
+                <th style="width:40%;">Render</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <th><code>${ undefined }</code></th>
+                <td><template is="literal-html">${ undefined }</template></td>
+            </tr>
+            <tr>
+                <th><code>${ null }</code></th>
+                <td>
+                    <template is="literal-html">${ null }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ NaN }</code></th>
+                <td>
+                    <template is="literal-html">${ NaN }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ 'Hello' }</code></th>
+                <td>
+                    <template is="literal-html">${ 'Hello' }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ true }, ${ false }</code></th>
+                <td>
+                    <template is="literal-html">${ true }, ${ false }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ 123.4 }</code></th>
+                <td>
+                    <template is="literal-html">${ 123.4 }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ Infinity }, ${ -Infinity }</code></th>
+                <td>
+                    <template is="literal-html">${ Infinity }, ${ -Infinity }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ function name(param) {} }</code></th>
+                <td>
+                    <template is="literal-html">${ function name(param) {} }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ (param) => {} }</code></th>
+                <td>
+                    <template is="literal-html">${ (param) => {} }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ /^regexp/ }</code></th>
+                <td>
+                    <template is="literal-html">${ /^regexp/ }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ Symbol('name') }</code></th>
+                <td>
+                    <template is="literal-html">${ Symbol('name') }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ [0, 1, 2, 3] }</code></th>
+                <td>
+                    <template is="literal-html">${ [0, 1, 2, 3] }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ { property: 'value' } }</code></th>
+                <td>
+                    <template is="literal-html">${ { property: 'value' } }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ document.createTextNode('Hello') }</code></th>
+                <td>
+                    <template is="literal-html">${ document.createTextNode('Hello') }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ Promise.resolve('yoohoo') }</code></th>
+                <td>
+                    <template is="literal-html">${ Promise.resolve('yoohoo') }</template>
+                </td>
+            </tr>
+            <tr>
+                <th><code>${ events('pointermove', body)<br/>
+                &nbsp;&nbsp;.map((e) => round(e.pageX)) }</code></th>
+                <td>
+                    <template is="literal-html">${ events('pointermove', body).map((e) => round(e.pageX)) }</template>
+                </td>
+            </tr>
+        </tbody>
+    </table-->
+
+    <!--div 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>
+            <p hidden="${ window.data = data, data.state }">Render counts in ().</p>
             <p title="${ data.state }" class="${ data.state }">(${ this.renderCount }) ${ data.state }</p>
             ${ include('#template-1', data) }
             ${ include('#template-2', data) }
         </template>
-    </div>
+    </div-->
+
 
     <div class="test">
+        <template is="literal-html" data-state="1" data-value="Hello" data-template="2">
+            ${ window.data = data, include('#template-' + data.template, data) }
+        </template>
+    </div>
+
+    <!--div 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>
-            <!--${ window.data = data, '' }-->
             <p class="${ 'hello world' }">${ 'Hello world' }</p>
-            <pre>(${ this.renderCount }) data = ${ data }</pre>
+            <pre>(${ this.renderCount }) data = ${ window.data = data, data }</pre>
             <pre>(${ this.renderCount }) data.state = ${ data.state }</pre>
             <pre>(${ this.renderCount }) data.value = ${ data.value }</pre>
             (${ this.renderCount })
-            ${ include('#template-' + data.template, data) }
+            ${ window.data = data, include('#template-' + data.template, data) }
             ${ include('#template-2', data) }
         </template>
     </div>
 
-    <div class="test">
+    <!--div 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>.
@@ -123,7 +246,7 @@ <h2>is="literal-html"</h2>
             .log('click')
             .map((e) => request().then(include('#template-' + ((++data.template) % 2 + 1), data)))
         }
-    </template-->
+    </template>
 
     <div class="test">
         <template is="literal-html" data-value="Hello World">
@@ -174,7 +297,7 @@ <h2>Print data</h2>
             to an existing property triggers a fresh render.</p>
             ${ window.data = data, print(data) }
         </template>
-    </div>
+    </div-->
 
     <script type="module">
     import '../scope.js';
diff --git a/modules/compile/compile-node.js b/modules/compile/compile-node.js
index cceade7..eba4ffe 100644
--- a/modules/compile/compile-node.js
+++ b/modules/compile/compile-node.js
@@ -167,12 +167,6 @@ const compileNode = overload((targets, node) => toType(node), {
         }
 
         targets.push(target);
-
-        // Insert text node. When renderer is created with cloned DOM, clone of
-        // `node` is assigned to `renderer.first` and the clone of this new text
-        // node is assigned as `renderer.last`.
-        node.after(document.createTextNode(''));
-
         return targets;
     },
 
diff --git a/modules/compile/compile_.js b/modules/compile/compile_.js
deleted file mode 100644
index d6f54d6..0000000
--- a/modules/compile/compile_.js
+++ /dev/null
@@ -1,72 +0,0 @@
-
-import compileFn  from '../../../fn/modules/compile.js';
-import { log }    from '../log.js';
-import { indent } from './constants.js';
-
-const DEBUG = false;//window.DEBUG;
-
-/**
-compile(source, scope, parameters, message, options)
-Compiles a literal template string to a function.
-
-(`options.nostrict = true` enables template rendering `with(data)`.)
-**/
-
-// Store render functions against their source
-export const compiled = {};
-
-// Last param, message, is for logging/throwing message
-export default function compile(source, scope, parameters, message = '', options = {}) {
-    // Hey hey, we are not in 'strict mode' inside compiled functions by default
-    // so we CAN use with(), making `${ data.name }` available as simply `${ name }`
-    // in a template... but let's make it opt-in (for the moment at least). There
-    // be dragons:
-    //
-    // 1. MDN says `with` should be considered deprecated. I really don't see
-    // how they can remove it, though:
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with
-    //
-    // 2. Accessing a not-defined property via `with(data)` does not appear to
-    // be reflected in the `data` proxy get records where the property is not
-    // defined. This is bad, because that property won't flag the renderer for
-    // rerendering.
-    //
-    // 3.Arrays and other objects have their entire prototype chain exposed,
-    // so `map()`, `filter()` and stuff can be called on the array, which is
-    // weird, and probably bad. If we are going to use nostrict mode it would
-    // probably be best to devise some way of enforcing the base data object to
-    // be a prototype-less object of some sort.
-    const code = '\n' + indent
-        + (options.nostrict ? 'with(data) ' : '"use strict";')
-        + 'return this.compose`' + source + '`;\n';
-
-    // Return cached fn
-    if (compiled[code]) { return compiled[code]; }
-
-    // The DEBUG logging version (removed in built files)
-    // Error handling has been moved to compile and render steps
-    /*if (DEBUG) {
-        try {
-            const t0 = window.performance.now();
-            const fn = compileFn(scope, parameters, code);
-            const t1 = window.performance.now();
-
-            // Store totals on the compile function
-            compile.duration += (t1 - t0);
-            compile.count    += 1;
-
-            // Log this compile
-            log('compile', (t1 - t0).toPrecision(3) + 'ms – ' + message, undefined, undefined, 'yellow');
-
-            return compiled[code] = fn;
-        }
-        catch(e) {
-            // Append message to error message
-            e.message += ' in ' + message;
-            throw e;
-        }
-    }*/
-
-    // The quick version
-    return compiled[code] = compileFn(scope, parameters, code);
-}
diff --git a/modules/define-element.js b/modules/define-element.js
index 7826480..40db5e2 100644
--- a/modules/define-element.js
+++ b/modules/define-element.js
@@ -6,7 +6,7 @@ import element, { getInternals } from '../../dom/modules/element.js';
 import toPrefetchPromise         from '../../dom/modules/element/to-prefetch-promise.js';
 import defineProperty            from './define-property.js';
 import getById                   from './dom/get-by-id.js';
-import Template          from './template.js';
+import Template                  from './template.js';
 
 const assign  = Object.assign;
 const entries = Object.entries;
diff --git a/modules/dom/delete-range.js b/modules/dom/delete-range.js
new file mode 100644
index 0000000..1400e48
--- /dev/null
+++ b/modules/dom/delete-range.js
@@ -0,0 +1,17 @@
+
+export default function deleteRange(first, last) {
+    if (window.DEBUG && first.parentNode !== last.parentNode) {
+        throw new Error('deleteRange: first and last not children of same parent')
+    }
+
+    if (first === last) {
+        last.remove();
+        return;
+    }
+
+    // Select range of nodes and remove
+    const range = new Range();
+    range.setStartBefore(first);
+    range.setEndBefore(last);
+    range.deleteContents();
+}
diff --git a/modules/renderer.js b/modules/renderer.js
index ebeb0b0..6fc59c6 100644
--- a/modules/renderer.js
+++ b/modules/renderer.js
@@ -8,6 +8,15 @@ import TokensRenderer      from './renderer/renderer-tokens.js';
 import ValueRenderer       from './renderer/renderer-value.js';
 import TextRenderer        from './renderer/renderer-text.js';
 
+/*
+    Include bind() in parameters somehow...
+    AttributeRenderer.prototype.create.call(this, element, assign({
+        // Parameters
+        bind: (path, object, to = id, from = id) =>
+            bindValue(element, object, path, to, from, setValue)
+    }, parameters));
+*/
+
 Renderer.create = function create(signal, literal, parameters, element, n, debug) {
     const name = typeof n === 'string' && (names[n] || n) ;
 
diff --git a/modules/renderer/compose-boolean.js b/modules/renderer/compose-boolean.js
deleted file mode 100644
index aedbe6d..0000000
--- a/modules/renderer/compose-boolean.js
+++ /dev/null
@@ -1,19 +0,0 @@
-
-import sum from '../../../fn/modules/sum.js';
-
-export default function composeBoolean(values) {
-    values = Array.from(values);
-
-    // Sum the strings in values[0], ignoring spaces
-    values[0] = !!values[0]
-        .join(' ')
-        .trim()
-        .split(/\s+/)
-        .map(Boolean)
-        .reduce(sum);
-
-    // Sum all values
-    return !!values
-        .map(Boolean)
-        .reduce(sum);
-}
diff --git a/modules/renderer/compose-number.js b/modules/renderer/compose-number.js
deleted file mode 100644
index 872dfb4..0000000
--- a/modules/renderer/compose-number.js
+++ /dev/null
@@ -1,14 +0,0 @@
-
-export default function composeNumber(values) {
-    const strings = values[0];
-
-    let n = 0;
-    let string = strings[n];
-
-    while (strings[++n] !== undefined) {
-        // Append to string
-        string += values[n] + strings[n];
-    }
-
-    return Number(string);
-}
diff --git a/modules/renderer/compose-string.js b/modules/renderer/compose-string.js
deleted file mode 100644
index ee5fb70..0000000
--- a/modules/renderer/compose-string.js
+++ /dev/null
@@ -1,35 +0,0 @@
-
-import toText from './to-text.js';
-
-function reducer(output, value) {
-    // Ignore undefined and empty strings
-    return value === '' || value === undefined ?
-        output :
-        output + value ;
-}
-
-function stringify(value, string, render) {
-    return value && typeof value === 'object' ? (
-        // If expression returns an array with promises
-        value.find ?
-            string + value.map(toText).reduce(reducer) :
-            // pass any other value to render
-            string + toText(value)
-    ) :
-    string + toText(value) ;
-}
-
-export default function composeString(values) {
-    const strings = values[0];
-
-    return strings
-    .map((string, i) => (
-        i <= values.length ?
-            // Strings 0 to n - 1
-            stringify(values[i + 1], string, toText) :
-            // Final string
-            string === '' ? undefined :
-            string
-    ))
-    .reduce(reducer);
-}
diff --git a/modules/renderer/renderer-attribute.js b/modules/renderer/renderer-attribute.js
index b0db186..1a60198 100644
--- a/modules/renderer/renderer-attribute.js
+++ b/modules/renderer/renderer-attribute.js
@@ -1,8 +1,9 @@
 
-import composeString from './compose-string.js';
-import names         from './property-names.js';
+//import composeString from './compose-string.js';
+import names  from './property-names.js';
 import Renderer, { stats } from './renderer.js';
 import { printRenderError } from '../scope/print.js';
+import toText from './to-text.js';
 
 
 const getDescriptor = Object.getOwnPropertyDescriptor;
@@ -29,13 +30,24 @@ function setProperty(node, name, value) {
     // Seek and set a matching property
     if (node[name] === value) return 0;
     node[name] = value;
-    return 1;
+    if (window.DEBUG) ++stats.property;
 }
 
 function setAttribute(node, name, value) {
     if (value === node.getAttribute(name)) return 0;
     node.setAttribute(name, value);
-    return 1;
+    if (window.DEBUG) ++stats.attribute;
+}
+
+export function toAttributeString(values) {
+    // Zip strings and values into a single string
+    const strings = values[0];
+    let n      = 0;
+    let string = strings[n];
+    while (strings[++n] !== undefined) {
+        string += toText(values[n]);
+        string += strings[n];
+    }
 }
 
 export default class AttributeRenderer extends Renderer {
@@ -70,17 +82,14 @@ export default class AttributeRenderer extends Renderer {
         return super.evaluate();
     }
 
-    render() {
-        // TODO: This may be dangerous. Test with promises and arrays and the like
-        this.value = this.singleExpression ?
+    render(strings) {
+        // If arguments contains a single expression use its value
+        const value = this.singleExpression ?
             arguments[1] :
-            composeString(arguments) ;
+            toAttributeString(arguments) ;
 
-        if (this.writable) {
-            stats.property += setProperty(this.element, this.property, this.value);
-        }
-        else {
-            stats.attribute += setAttribute(this.element, this.name, this.value);
-        }
+        return this.writable ?
+            setProperty(this.element, this.property, value) :
+            setAttribute(this.element, this.name, value) ;
     }
 }
diff --git a/modules/renderer/renderer-boolean.js b/modules/renderer/renderer-boolean.js
index 11bf95d..a7648cc 100644
--- a/modules/renderer/renderer-boolean.js
+++ b/modules/renderer/renderer-boolean.js
@@ -1,6 +1,6 @@
 
 import Signal            from '../../../fn/modules/signal.js';
-import composeBoolean    from './compose-boolean.js';
+import sum               from '../../../fn/modules/sum.js';
 import AttributeRenderer from './renderer-attribute.js';
 import { stats }         from './renderer.js';
 
@@ -12,25 +12,42 @@ attribute.
 **/
 
 function setBooleanProperty(node, name, value) {
-    if (node[name] === !!value) return 0;
+    if (node[name] === !!value) return;
     node[name] = !!value;
-    return 1;
+    if (window.DEUBG) ++stats.property;
 }
 
 function setBooleanAttribute(node, name, value) {
     // If attribute is already set...
     if ((node.getAttribute(name) !== null)) {
-        if (value) return 0;
+        if (value) return;
         node.removeAttribute(name);
-        return 1;
+        if (window.DEUBG) ++stats.attribute;
+        return;
     }
 
     // Otherwise...
-    if (!value) return 0;
+    if (!value) return;
     node.setAttribute(name, name);
-    return 1;
+    return;
 }
 
+export function toAttributeBoolean(values) {
+    // Sum all values
+    const strings = values[0];
+    let n = 0;
+
+    // Anything other than white space in strings counts as true
+    if (/\S/.test(strings[n])) return true;
+    while (strings[++n] !== undefined) {
+        if (Boolean(values[n])) return true;
+        if (/\S/.test(strings[n])) return true;
+    }
+
+    return false;
+}
+
+
 export default class BooleanRenderer extends AttributeRenderer {
     static parameterNames = AttributeRenderer.parameterNames;
 
@@ -45,15 +62,13 @@ export default class BooleanRenderer extends AttributeRenderer {
     }
 
     render(strings) {
-        const value = composeBoolean(arguments);
+        // If arguments contains a single expression use its value
+        const value = this.singleExpression ?
+            arguments[1] :
+            toAttributeBoolean(arguments);
 
-        if (this.writable) {
-            stats.property += setBooleanProperty(this.element, this.property, value);
-        }
-        else {
-            stats.attribute += setBooleanAttribute(this.element, this.name, value) ;
-        }
-
-        return;
+        return this.writable ?
+            setBooleanProperty(this.element, this.property, value) :
+            setBooleanAttribute(this.element, this.name, value) ;
     }
 }
diff --git a/modules/renderer/renderer-checked.js b/modules/renderer/renderer-checked.js
index 4d82324..11cbf87 100644
--- a/modules/renderer/renderer-checked.js
+++ b/modules/renderer/renderer-checked.js
@@ -5,8 +5,8 @@ import Signal            from '../../../fn/modules/signal.js';
 import trigger           from '../../../dom/modules/trigger.js';
 import config            from '../config.js';
 import bindChecked       from '../scope/bind-checked.js';
-import composeBoolean    from './compose-boolean.js';
 import AttributeRenderer from './renderer-attribute.js';
+import { toAttributeBoolean } from './renderer-boolean.js';
 import { getValue }      from './value.js';
 import { stats }         from './renderer.js';
 
@@ -36,19 +36,15 @@ function setChecked(element, value, hasValueAttribute) {
         !!value ;
 
     // Avoid updating the DOM unnecessarily
-    if (checked === element.checked) {
-        return 0;
-    }
+    if (checked === element.checked) return;
 
     element.checked = checked;
+    if (window.DEBUG) ++stats.property;
 
     // Optional event hook
     if (config.updateEvent) {
         trigger(config.updateEvent, node);
     }
-
-    // Return DOM mod count
-    return 1;
 }
 
 export default class CheckedRenderer extends AttributeRenderer {
@@ -66,24 +62,12 @@ export default class CheckedRenderer extends AttributeRenderer {
         Signal.evaluate(this, this.evaluate);
     }
 
-/*
-    create(element, parameters) {
-        return AttributeRenderer.prototype.create.call(this, element, assign({
-            // Parameters
-            bind: (path, object, to=id, from=id) =>
-                bindChecked(element, object, path, to, from, setChecked)
-        }, parameters));
-    }
-*/
     render(strings) {
-        if (this.singleExpression) {
-            // Don't bother evaluating empty space in attributes
-            this.value = arguments[1];
-        }
-        else {
-            this.value = composeBoolean(arguments);
-        }
+        // If arguments contains a single expression use its value
+        const value = this.singleExpression ?
+            Boolean(arguments[1]) :
+            toAttributeBoolean(arguments) ;
 
-        stats.property += setChecked(this.element, this.value, this.hasValue);
+        return setChecked(this.element, value, this.hasValue);
     }
 }
diff --git a/modules/renderer/renderer-text.js b/modules/renderer/renderer-text.js
index bff528c..188db3e 100644
--- a/modules/renderer/renderer-text.js
+++ b/modules/renderer/renderer-text.js
@@ -8,10 +8,9 @@ that DOM after the text node.
 
 import Signal           from '../../../fn/modules/signal.js';
 import Data             from '../../../fn/modules/signal-data.js';
-import isTextNode       from '../../../dom/modules/is-text-node.js';
+import { isCommentNode, isElementNode, isFragmentNode, isTextNode } from '../../../dom/modules/node.js';
 import include          from '../scope/include.js';
-import indexOf          from '../dom/index-of.js';
-import removeNodeRange  from '../dom/remove-node-range.js';
+import deleteRange      from '../dom/delete-range.js';
 import Template         from '../template.js';
 import print, { printRenderError } from '../scope/print.js';
 import toText           from './to-text.js';
@@ -25,38 +24,6 @@ function stop(node) {
     node && typeof node === 'object' && node.stop && node.stop();
 }
 
-function toRenderer(value) {
-    return value instanceof Template ? value :
-           value instanceof Node ? value :
-           toText(value) ;
-}
-
-function pushContents(contents, object) {
-    // Object may be a string, DOM node, fragment, template renderer. Here
-    // we concat strings together. May have side effects on complicated DOM
-    // updates, so keep an eye out.
-    if (typeof object === 'object') {
-        contents.push(object);
-    }
-    else if (typeof contents[contents.length - 1] === 'string') {
-        contents[contents.length - 1] += object;
-    }
-    else {
-        contents.push(object + '');
-    }
-
-    return contents;
-}
-
-function composeDOM(contents, object) {
-    // Flatten nested arrays of renderables
-    if (Array.isArray(object)) {
-        return object.reduce(composeDOM, contents);
-    }
-
-    return pushContents(contents, toRenderer(object));
-}
-
 function setNodeValue(node, value) {
     const nodeValue = node.nodeValue;
 
@@ -64,17 +31,15 @@ function setNodeValue(node, value) {
     if (nodeValue) {
         if (nodeValue !== value) {
             node.nodeValue = value;
-            return 1;
+            if (window.DEBUG) ++stats.text;
         }
     }
     else {
         if (value) {
             node.nodeValue = value;
-            return 1;
+            if (window.DEBUG) ++stats.text;
         }
     }
-
-    return 0;
 }
 
 function toContent(object) {
@@ -83,95 +48,6 @@ function toContent(object) {
         object ;
 }
 
-function updateDOM(stats, first, last, objects) {
-    // Sanity check
-    if (window.DEBUG) {
-        if (first === last) {
-            throw new Error('`first` and `last` are the same node');
-        }
-
-        if (first.parentNode !== last.parentNode) {
-            throw new Error('`first` and `last` are not siblings');
-        }
-
-        const iFirst   = indexOf(first);
-        const iLast    = indexOf(last);
-        if (iFirst > iLast) {
-            throw new Error('`last` is not after `first`, first: ' + iFirst + ' last: ' + iLast);
-        }
-    }
-//console.log('TextRenderer updateDOM', objects);
-    //console.log(0, 'updateDOM', first.textContent, last.textContent, objects, nLast);
-    const nLast = objects.length - 1;
-
-    // Render first object. `objects[0]` is always a string. `first` is a
-    // text node.
-    stats.text += setNodeValue(first, objects[0]);
-
-    let node  = first.nextSibling;
-    let n     = 0;
-    while (++n < nLast) {
-        const object = objects[n];
-
-        // Is object a primitive
-        if (typeof object !== 'object') {
-            // If node is a text node, use it.
-            if (node !== last && isTextNode(node)) {
-                stats.text += setNodeValue(node, object);
-                node = node.nextSibling;
-            }
-            // ...otherwise insert a text node
-            else {
-                node.before(object);
-                ++stats.add;
-//console.log('add', typeof object, object);
-            }
-            continue;
-        }
-
-        // Is object a Template with nodes already in this DOM
-        if (object instanceof Template && (node === object.first || node === object.last)) {
-//console.log('Skip nodes handled by Template');
-            // Skip over nodes handled by the renderer
-            node = object.last.nextSibling;
-            continue;
-        }
-
-        // If node and object are the same thing. Could happen, I suppose, if
-        // a template expression returns a cached node on successive renders.
-        if (node === object) {
-            node = node.nextSibling;
-            continue;
-        }
-
-        // Remove template or node from wherever it currently is
-        if (object.remove) {
-//console.log('Remove object', object);
-            stats.remove += (object.remove() || 0);
-        }
-
-        // And put it here
-        const content = toContent(object);
-        node.before(content);
-        ++stats.add;
-//console.log('add', 'content', content);
-    }
-
-    // Remove unused nodes up to last
-    while (node !== last) {
-// Ahaaaa... we want to stop any streams here, if we are removing a stream
-//console.log('Remove unused', typeof node, node);
-        const nd = node;
-        node = node.nextSibling;
-        nd.remove();
-        ++stats.remove;
-    }
-
-    // Render last object. Where objects is less than 1 item long empty `last`,
-    // otherwise render last object into `last`.
-    stats.text += setNodeValue(last, nLast < 1 ? null : objects[nLast]);
-    return stats;
-}
 
 /**
 TextRenderer()
@@ -185,7 +61,7 @@ export default class TextRenderer extends Renderer {
     constructor(signal, literal, parameters, element, node, debug) {
         if (window.DEBUG) {
             if (!isTextNode(node))             throw new Error('TextRenderer() node not a text node');
-            if (!isTextNode(node.nextSibling)) throw new Error('TextRenderer() node.nextSibling not a text node');
+            //if (!isTextNode(node.nextSibling)) throw new Error('TextRenderer() node.nextSibling not a text node');
         }
 
         // Parameters added to text renderer
@@ -195,14 +71,10 @@ export default class TextRenderer extends Renderer {
         });
 
         super(signal, literal, params, element, node, debug);
-        this.contents = [];
 
-        // Handily (deliberately), node.nextSibling is a text node left here
-        // by the compile step to be used as this.last
-        // TODO: Use node range instead?
-        // https://developer.mozilla.org/en-US/docs/Web/API/Range
-        this.first   = node;
-        this.last    = node.nextSibling;
+        // Contents may contain Nodes and LiteralTemplates, but the last item
+        // in contents will always be the original text node
+        this.contents = [node];
 
         // A synchronous evaluation while data signal value is undefined binds
         // this renderer to changes to that signal. If signal value is a `data`
@@ -210,6 +82,18 @@ export default class TextRenderer extends Renderer {
         Signal.evaluate(this, this.evaluate);
     }
 
+    get firstNode() {
+        // The first item in contents may be a LiteralTemplate
+        return this.contents[0].firstNode ?
+            this.contents[0].firstNode :
+            this.contents[0] ;
+    }
+
+    get lastNode() {
+        // The last item in contents is always the original text node
+        return this.contents[this.contents.length - 1];
+    }
+
     include(url) {
         return arguments.length === 1 ?
             // Partially applied
@@ -226,8 +110,18 @@ export default class TextRenderer extends Renderer {
             catch(error) {
                 // Error object, renderer, DATA
                 const elem = printRenderError(this, error);
-                this.first.before(elem);
-                removeNodeRange(this.first, this.last);
+
+                // Remove objects
+                const contents = this.contents;
+                if (contents.length > 1) {
+                    deleteRange();
+                    if (window.DEBUG) ++stats.remove;
+                    while (contents[1]) stop(contents.shift());
+                }
+
+                // Manipulate contents
+                contents[0].before(elem);
+                contents.unshift(elem);
                 return;
             }
         }
@@ -236,18 +130,92 @@ export default class TextRenderer extends Renderer {
     }
 
     render(strings) {
-        let n = 0;
+        const contents = this.contents;
+        let i      = -1;
+
+        // Last is the original text node
+        const last = contents[contents.length - 1];
+        let n      = -1;
+        let string = '';
+        let object;
+
+        while(++n < strings.length - 1) {
+            // Add previous string in stings to output string
+            string += strings[n];
+
+            // Object may be a string, DOM node, fragment or Literal Template.
+            object = arguments[n + 1];
+
+            // If object is not a node or renderer, append to string
+            if (!(object instanceof Template) && !(object instanceof Node)) {
+                string += toText(object);
+                continue;
+            }
 
-        this.contents.forEach(stop);
-        this.contents.length = 0;
-        this.contents.push(strings[n]);
+            // If a there is a string to splice in
+            if (string) {
+                // And content is a text node, but not the last text node, update it
+                if (++i < contents.length - 1 && isTextNode(contents[i])) {
+                    setNodeValue(contents[i], string);
+                }
+                // Otherwise create new text node and splice it into contents
+                // and the DOM
+                else {
+                    const node = document.createTextNode(string);
+                    contents[i].before(node);
+                    contents.splice(i, 0, node);
+                    if (window.DEBUG) ++stats.add;
+                }
+
+                string = '';
+            }
+
+            // It is possible that the template has returned the same object
+            // again, in which case we do nothing. Unlikely, but possible.
+            if (object === contents[++i]) continue;
+            --i;
+
+            if (object instanceof Template) {
+                // Content is also a template. Maybe in future we will update it,
+                // but for now, replace it
+                // Add template content to the DOM
+                contents[++i].before(toContent(object));
+                contents.splice(i, 0, object);
+                if (window.DEBUG) ++stats.add;
+                continue;
+            }
+
+            if (isFragmentNode(object)) {
+                // TODO Splice fragment content in... represent in contents
+                // with a new object?
+                console.log('TODO');
+                continue;
+            }
+
+            // Compare object against current content
+            if (isTextNode(object) || isElementNode(object) || isCommentNode(object)) {
+                // Splice node into contents and the DOM
+                contents[++i].before(object);
+                contents.splice(i, 0, object);
+                if (window.DEBUG) ++stats.add;
+                continue;
+            }
+        }
+
+        // Add the last string on
+        string += strings[n];
 
-        while (strings[++n] !== undefined) {
-            composeDOM(this.contents, arguments[n]);
-            pushContents(this.contents, strings[n]);
+        // Remove unused content up to but not including the last node
+        // and .stop() it
+        if (contents[++i] !== last) {
+            const mid = contents[i].firstNode || contents[i];
+            deleteRange(mid, last);
+            if (window.DEBUG) ++stats.remove;
+            contents.splice(i, contents.length - i - 1).forEach(stop);
         }
 
-        updateDOM(stats, this.first, this.last, this.contents);
+        // Set text of final text node
+        setNodeValue(last, string);
     }
 
     stop() {
diff --git a/modules/renderer/renderer-tokens.js b/modules/renderer/renderer-tokens.js
index e760ee1..c0ba829 100644
--- a/modules/renderer/renderer-tokens.js
+++ b/modules/renderer/renderer-tokens.js
@@ -28,7 +28,7 @@ function updateTokens(list, cached, tokens, count = 0) {
     // The remainder are not in values and thus must be removed
     if (cached.length) {
         list.remove.apply(list, cached);
-        ++count;
+        if (window.DEBUG) ++stats.tokens;
     }
 
     // Add the new tokens. The list object (a TokenList) ignores tokens it
@@ -36,9 +36,10 @@ function updateTokens(list, cached, tokens, count = 0) {
     // for logging
     if (tokens.length) {
         list.add.apply(list, tokens);
-        ++count
+        if (window.DEBUG) ++stats.tokens;
     }
 
+    if (window.DEBUG) ++stats.tokens;
     return count;
 }
 
@@ -59,30 +60,28 @@ export default class TokensRenderer extends AttributeRenderer {
     }
 
     render(strings) {
-        let mutations = 0;
-
-        // Set permanent tokens on first render only
+        // Set permanent tokens from strings on first render
         if (this.renderCount === 1) {
-            const tokens = strings
-                .join(' ')
-                .trim();
-
+            const tokens = strings.join(' ').trim();
             if (tokens) {
                 const array = tokens.split(/\s+/);
                 this.list.add.apply(this.list, array);
-                stats.token += array.length;
+                if (window.DEBUG) stats.token += 1;
             }
         }
 
-        // Turn evaluated values into an array of strings
-        const tokens = A.slice.call(arguments, 1)
-            .map(toText)
-            .join(' ')
-            .trim()
-            .split(/\s+/)
-            .filter((string) => !!string);
+        // Concat remaining expression values into a spaced string
+        let n      = 0;
+        let string = '';
+        while (strings[++n] !== undefined) {
+            string += ' ' + toText(arguments[n]);
+        }
+
+        // Split into tokens
+        const tokens = string.trim().split(/\s+/);
 
-        stats.token += updateTokens(this.list, this.tokens, tokens);
+        // Set new tokens, remove unused tokens
+        updateTokens(this.list, this.tokens, tokens);
         this.tokens = tokens;
     }
 }
diff --git a/modules/renderer/renderer-value.js b/modules/renderer/renderer-value.js
index 41d4f85..4530c50 100644
--- a/modules/renderer/renderer-value.js
+++ b/modules/renderer/renderer-value.js
@@ -1,13 +1,12 @@
 
 import id                from '../../../fn/modules/id.js';
+import get               from '../../../fn/modules/get.js';
 import overload          from '../../../fn/modules/overload.js';
 import Signal            from '../../../fn/modules/signal.js';
 import config            from '../config.js';
 import bindValue         from '../scope/bind-value.js';
-import AttributeRenderer from './renderer-attribute.js';
+import AttributeRenderer, { toAttributeString } from './renderer-attribute.js';
 import { stats }         from './renderer.js';
-import composeString     from './compose-string.js';
-import composeNumber     from './compose-number.js';
 import { getValue, setValue, removeValue } from './value.js';
 
 
@@ -18,24 +17,14 @@ value property. Parameter `name` is redundant, but here for symmetry with other
 renderers.
 **/
 
-const compose = overload((value, type) => type, {
+const toValue = overload(get('type'), {
     //'date':      composeDate,
     //'select-multiple': composeArray,
-    'number':     composeNumber,
-    'range':      composeNumber,
-    'default':    composeString
+    'number':     Number,
+    'range':      Number,
+    'default':    id
 });
 
-/*
-    create(element, parameters) {
-        return AttributeRenderer.prototype.create.call(this, element, assign({
-            // Parameters
-            bind: (path, object, to = id, from = id) =>
-                bindValue(element, object, path, to, from, setValue)
-        }, parameters));
-    }
-*/
-
 export default class ValueRenderer extends AttributeRenderer {
     static parameterNames = ['data', 'DATA', 'element', 'host', 'shadow', 'bind'];
 
@@ -43,18 +32,19 @@ export default class ValueRenderer extends AttributeRenderer {
         super(signal, literal, parameters, element, 'value', debug);
 
         // A synchronous evaluation while data signal value is undefined binds
-        // this renderer to changes to that signal. If signal value is an `data`
-        // object it renders the renderer immediately.
+        // this renderer to changes to signal. If signal has value this also
+        // renders the renderer immediately.
         Signal.evaluate(this, this.evaluate);
     }
 
     render(strings) {
-        this.value = this.singleExpression ?
-            // Don't evaluate empty space in attributes with a single expression
+        // If arguments contains a single expression use its value
+        const value = toValue(this.element.type, this.singleExpression ?
             arguments[1] :
-            compose(arguments, this.element.type) ;
+            toAttributeString(arguments)
+        );
 
-        stats.property += setValue(this.element, this.value);
+        return setValue(this.element, value);
     }
 
     stop() {
diff --git a/modules/renderer/renderer.js b/modules/renderer/renderer.js
index 80f933c..86f995a 100644
--- a/modules/renderer/renderer.js
+++ b/modules/renderer/renderer.js
@@ -21,7 +21,6 @@ export const stats = {
 
 let id = 0;
 
-
 function callStop(stopable) {
     stopable.stop();
 }
@@ -131,6 +130,7 @@ function renderExpressionValue(value) {
 /*
 Renderer(path, name, source, message)
 */
+const values = [];
 let N = 0;
 export default class Renderer {
     static parameterNames = ['data', 'DATA', 'element', 'host', 'shadow'];
@@ -198,6 +198,11 @@ console.warn(this.constructor.name + ' ' + this.template.id + ' ' + this.path +
         return this;
     }
 
+
+    /*
+    .compose(strings, ...args)
+    The renderer method called by compiled literal function
+    */
     compose(strings) {
         // Flag the literal as containing exactly 1 expression optionally
         // surrounded by whitespace, which allows for some optimisations
@@ -209,8 +214,6 @@ console.warn(this.constructor.name + ' ' + this.template.id + ' ' + this.path +
                 && !/\S/.test(strings[1]) ;
         }
 
-        // Loop over strings[1] to end, evaluate argument that precedes
-        // each string, collapsing them to primitives
         let n = 0;
         while (strings[++n] !== undefined) {
             renderValue(this, arguments, arguments, n, arguments[n]);
diff --git a/modules/renderer/value.js b/modules/renderer/value.js
index 24390e0..b7357d9 100644
--- a/modules/renderer/value.js
+++ b/modules/renderer/value.js
@@ -84,15 +84,11 @@ function setElementValue(element, value) {
     const isEnhanced = enhancedTypes[element.type];
 
     // If value is already set on $value expando do nothing
-    if (isEnhanced && $value in element && element[$value] === value) {
-        return 0;
-    }
+    if (isEnhanced && $value in element && element[$value] === value) return;
 
     // Refuse to set value that does not conform to input type
     const expectedType = types[element.type];
-    if (expectedType && typeof value !== expectedType) {
-        return 0;
-    }
+    if (expectedType && typeof value !== expectedType) return;
 
     // Where input is an enhanced type set object value as a $value expando
     if (isEnhanced) {
@@ -103,9 +99,7 @@ function setElementValue(element, value) {
     const string = toText(value);
 
     // Avoid updating DOM with the same value.
-    if (string === element.value) {
-        return 0;
-    }
+    if (string === element.value) return;
 
     // Bit of an edge case, but where we have a custom element that has not
     // been upgraded yet, but will have a value property defined on its
@@ -113,11 +107,13 @@ function setElementValue(element, value) {
     // mask the ultimate get/set definition on the prototype...
     if ('value' in element) {
         element.value = string;
+        if (window.DEBUG) ++stats.property;
     }
     // ...so don't, if property is not in node. Set the attribute, it will be
     // picked up on upgrade.
     else {
         element.setAttribute('value', string);
+        if (window.DEBUG) ++stats.attribute;
     }
 
     // Optional event hook
@@ -126,7 +122,7 @@ function setElementValue(element, value) {
     }
 
     // Return DOM mod count
-    return 1;
+    return;
 }
 
 export const setValue = overload(get('type'), {
diff --git a/modules/template.js b/modules/template.js
index d239aa2..27c3e92 100644
--- a/modules/template.js
+++ b/modules/template.js
@@ -30,7 +30,7 @@ import Signal              from '../../fn/modules/signal.js';
 import Data                from '../../fn/modules/signal-data.js';
 import create              from '../../dom/modules/create.js';
 import identify            from '../../dom/modules/identify.js';
-import isTextNode          from '../../dom/modules/is-text-node.js';
+import { isTextNode, toNodeType } from '../../dom/modules/node.js';
 import { pathSeparator }   from './compile/constants.js';
 import removeNodeRange     from './dom/remove-node-range.js';
 import Renderer, { stats } from './renderer.js';
@@ -46,7 +46,7 @@ const defaults = {};
 
 
 /*
-Template
+LiteralTemplate
 Descendant paths are stored in the form `"#id>1>12>3"`, enabling fast
 cloning of template instances without retraversing their DOMs looking for
 literal attributes and text.
@@ -62,44 +62,12 @@ function getElement(path, node) {
         .reduce(getChild, node) ;
 }
 
-function isMarkerNode(node) {
-    // Markers should be spaces-only else we risk unrendered content being
-    // inserted into the DOM. If it's not a text node, it's not a marker
-    // node because it could contain something that contains unrendered code.
-    if (!isTextNode(node)) return false;
-
-    const text  = node.nodeValue;
-    const space = /^\s*/.exec(text);
-
-    // If text is more than just space return false
-    return space[0].length === text.length;
-}
-
-function prepareContent(content) {
-    // Due to the way HTML is usually written the vast majority of templates
-    // start and end with a text node, usually containing some white space
-    // and new lines. Template uses these as delimiters for the start
-    // and end of templated content – where it can. If the template does NOT
-    // start or end with a text node, we insert text nodes where needed.
-    const first = content.childNodes[0];
-    const last  = content.childNodes[content.childNodes.length - 1];
-
-    if (!first || !isMarkerNode(first)) {
-        content.prepend(create('text'));
-    }
-
-    if (!last || !isMarkerNode(last)) {
-        content.append(create('text'));
-    }
-}
-
 function compileTemplate(template, id, options) {
     const content = template.content || create('fragment', template.childNodes, template) ;
 
     let targets;
     if (window.DEBUG) {
         groupCollapsed('compile', '#' + id, 'yellow');
-        prepareContent(content);
         targets = compileNode(content, options, { template });
         groupEnd();
     }
@@ -110,8 +78,42 @@ function compileTemplate(template, id, options) {
     return { content, targets };
 }
 
-export default class Template {
-    // Data signal
+function removeRange(first, last, fragment) {
+    if (window.DEBUG && first.parentNode !== last.parentNode) {
+        throw new Error('first and last not children of same parent')
+    }
+
+    if (first === last) {
+        fragment.prepend(last);
+        if (window.DEBUG) ++stats.remove;
+        return;
+    }
+
+    // Select range of nodes managed by this template
+    const range = new Range();
+    range.setStartBefore(first);
+    range.setEndAfter(last);
+
+    // Remove range content from DOM
+    const dom = range.extractContents();
+    if (window.DEBUG) ++stats.remove;
+
+    // And place into this.content fragment
+    fragment.appendChild(dom);
+}
+
+export default class LiteralTemplate {
+    static isTemplate(object) {
+        return object instanceof LiteralTemplate;
+    }
+
+    static of(html) {
+        const template = create('template', html);
+        return new LiteralTemplate(template);
+    }
+
+    #first;
+    #last;
     #data;
 
     constructor(template, parent = template.parentElement, parameters = {}, data, options = defaults) {
@@ -127,14 +129,16 @@ export default class Template {
                 nostrict: options.nostrict || (template.hasAttribute && template.hasAttribute('nostrict'))
             }));
 
-        const content = compiled.content.cloneNode(true);
+        const content   = compiled.content.cloneNode(true);
+        const children  = content.childNodes;
 
+        // The first node may change. The last node is always the last node.
+        this.#data      = Signal.of(Data.of(data));
+        this.#first     = children[0];
+        this.#last      = children[children.length - 1];
         this.content    = content;
         this.element    = parent;
         this.parameters = parameters;
-        this.first      = content.childNodes[0];
-        this.last       = content.childNodes[content.childNodes.length - 1];
-        this.#data      = Signal.of(Data.of(data));
         this.contents   = compiled.targets
             // We must find targets in cloned content
             .map(this.#toRendererParams, this)
@@ -166,84 +170,110 @@ export default class Template {
         return renderer;
     }
 
+    /*
+    template.firstNode
+    template.lastNode
+    */
+
+    get firstNode() {
+        // Has #first become the last node of a TextRenderer?
+        const renderer = this.contents[0];
+//console.log('First renderer', renderer, this.contents.length);
+        return this.#first === renderer.lastNode ?
+            renderer.firstNode :
+            this.#first ;
+    }
+
+    get lastNode() {
+        return this.#last;
+    }
+
+    /*
+    .push()
+    */
+
     push(object) {
         if (this.status === 'done') throw new Error('Renderer is done, cannot .push() data');
 
+        // Dedup
+        if (this.#data === object) return;
+
+        // If we are coming out of sleep put content back in the DOM
+        if (this.#data === null && object !== null) {
+            this.lastNode.before(this.content);
+        }
+
         // Causes renderers to .invalidate() because they are dependent on
         // this.#data signal
         this.#data.value = Data.of(object);
 
-        // If object is null remove all but the last node to the renderer's
-        // content fragment
+        // If object is null put template to sleep: remove all but the last node
+        // to the content fragment and blank out the last text node, which we
+        // leave in the DOM to serve as a marker for reentry of rendered content
         if (object === null) {
-            nodes.length = 0;
-            let node = this.first;
-
-            while (node !== this.last) {
-                nodes.push(node);
-                node = node.nextSibling;
+            if (this.firstNode !== this.lastNode) {
+                removeRange(this.firstNode, this.lastNode.previousSibling, this.content);
             }
 
-            this.content.prepend.apply(this.content, nodes);
-            stats.remove += nodes.length;
-            return this;
+            this.lastNode.textContent = '';
         }
 
-        // If there is a content in the content fragment and this.last is not in
-        // the content fragment, it must be in the parent DOM being used as a
-        // marker. It's time for its freshly rendered brethren to join it.
-        if (this.content.lastChild && this.last !== this.content.lastChild) {
-            this.last.before(this.content);
-            stats.add += 1;
+        return this.content;
+    }
+
+    /**
+    .before()
+    **/
+
+    before() {
+        const first = this.firstNode;
+        const last  = this.lastNode;
+
+        // Last node is not in the DOM
+        if (this.content.lastChild === last) {
+            throw new Error('Illegal LiteralTemplate.before() – template is not in the DOM')
         }
 
-        return this;
+        // First node is not in the DOM
+        return this.content.firstChild === first ?
+            last.before.apply(last, arguments) :
+            first.before.apply(first, arguments) ;
     }
 
     /**
     .remove()
     Removes rendered content from the DOM, placing it back in the
-    fragment at `renderer.content`.
+    `renderer.content` fragment.
     **/
+
     remove() {
-//console.log('Template.remove()');
-        // Can't remove if we're already removed
-        if (this.content.lastChild === this.last) {
-            return 0;
-        }
+        const first = this.firstNode;
+        const last  = this.lastNode;
 
-        // Remove first to last and all nodes in between to .content fragment
-        const nodes = getNodeRange(this.first, this.last);
-        this.content.prepend.apply(this.content, nodes);
-        stats.remove += nodes.length;
-        return nodes.length;
-    }
+        // Check if we are in the DOM. Can't remove if we're not in the DOM.
+        if (this.content.lastChild === last) {
+            return;
+        }
 
-    /**
-    .replaceWith()
-    Removes rendered content from the DOM and inserts arguments in its place.
-    **/
-    replaceWith() {
-//console.log('Template.replaceWith()');
-        // Can't replace if we're removed
-        if (this.content.lastChild === this.last) {
-            return 0;
+        if (this.content.firstChild === first) {
+            this.content.appendChild(last);
+            return;
         }
 
-        this.last.after.apply(this.last, arguments);
-        stats.add += arguments.length;
-        return this.remove();
+        removeRange(first, last, this.content);
     }
 
     /**
     .stop()
     Stops renderer.
     **/
+
     stop = Renderer.prototype.stop;
 
     /**
     .done(object)
     Registers `object.stop()` to be called when this renderer is stopped.
     **/
+
     done = Renderer.prototype.done;
 }
