diff --git a/src/compile/Component.ts b/src/compile/Component.ts
index 5608817302..9b3603ea04 100644
--- a/src/compile/Component.ts
+++ b/src/compile/Component.ts
@@ -5,7 +5,6 @@ import { walk, childKeys } from 'estree-walker';
 import { getLocator } from 'locate-character';
 import Stats from '../Stats';
 import deindent from '../utils/deindent';
-import CodeBuilder from '../utils/CodeBuilder';
 import reservedNames from '../utils/reservedNames';
 import namespaces from '../utils/namespaces';
 import { removeNode } from '../utils/removeNode';
@@ -17,8 +16,6 @@ import Stylesheet from './css/Stylesheet';
 import { test } from '../config';
 import Fragment from './nodes/Fragment';
 import shared from './shared';
-import { DomTarget } from './dom';
-import { SsrTarget } from './ssr';
 import { Node, ShorthandImport, Ast, CompileOptions, CustomElementOptions } from '../interfaces';
 import error from '../utils/error';
 import getCodeFrame from '../utils/getCodeFrame';
@@ -101,7 +98,6 @@ export default class Component {
 	name: string;
 	options: CompileOptions;
 	fragment: Fragment;
-	target: DomTarget | SsrTarget;
 
 	customElement: CustomElementOptions;
 	tag: string;
@@ -148,7 +144,6 @@ export default class Component {
 	refs: Set<string>;
 
 	file: string;
-	fileVar: string;
 	locate: (c: number) => { line: number, column: number };
 
 	stylesheet: Stylesheet;
@@ -168,15 +163,13 @@ export default class Component {
 		source: string,
 		name: string,
 		options: CompileOptions,
-		stats: Stats,
-		target: DomTarget | SsrTarget
+		stats: Stats
 	) {
 		this.stats = stats;
 
 		this.ast = ast;
 		this.source = source;
 		this.options = options;
-		this.target = target;
 
 		this.imports = [];
 		this.shorthandImports = [];
@@ -229,8 +222,6 @@ export default class Component {
 		this.aliases = new Map();
 		this.usedNames = new Set();
 
-		this.fileVar = options.dev && this.getUniqueName('file');
-
 		this.computations = [];
 		this.templateProperties = {};
 		this.properties = new Map();
diff --git a/src/compile/index.ts b/src/compile/index.ts
index 3a513ee731..958376b662 100644
--- a/src/compile/index.ts
+++ b/src/compile/index.ts
@@ -1,7 +1,7 @@
 import { assign } from '../shared';
 import Stats from '../Stats';
 import parse from '../parse/index';
-import renderDOM, { DomTarget } from './render-dom/index';
+import renderDOM from './render-dom/index';
 import renderSSR from './render-ssr/index';
 import { CompileOptions, Warning, Ast } from '../interfaces';
 import Component from './Component';
@@ -74,10 +74,7 @@ export default function compile(source: string, options: CompileOptions) {
 			source,
 			options.name || 'SvelteComponent',
 			options,
-			stats,
-
-			// TODO make component generator-agnostic, to allow e.g. WebGL generator
-			options.generate === 'ssr' ? null : new DomTarget()
+			stats
 		);
 		stats.stop('create component');
 
diff --git a/src/compile/nodes/Attribute.ts b/src/compile/nodes/Attribute.ts
index 2ebeb1f79d..94d6a958ee 100644
--- a/src/compile/nodes/Attribute.ts
+++ b/src/compile/nodes/Attribute.ts
@@ -9,11 +9,6 @@ import Text from './Text';
 import Block from '../render-dom/Block';
 import Expression from './shared/Expression';
 
-export interface StyleProp {
-	key: string;
-	value: Node[];
-}
-
 export default class Attribute extends Node {
 	type: 'Attribute';
 	start: number;
@@ -108,237 +103,6 @@ export default class Attribute extends Node {
 				: '';
 	}
 
-	render(block: Block) {
-		const node = this.parent;
-		const name = fixAttributeCasing(this.name);
-
-		if (name === 'style') {
-			const styleProps = optimizeStyle(this.chunks);
-			if (styleProps) {
-				this.renderStyle(block, styleProps);
-				return;
-			}
-		}
-
-		let metadata = node.namespace ? null : attributeLookup[name];
-		if (metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf(node.name))
-			metadata = null;
-
-		const isIndirectlyBoundValue =
-			name === 'value' &&
-			(node.name === 'option' || // TODO check it's actually bound
-				(node.name === 'input' &&
-					node.bindings.find(
-						(binding: Binding) =>
-							/checked|group/.test(binding.name)
-						)));
-
-		const propertyName = isIndirectlyBoundValue
-			? '__value'
-			: metadata && metadata.propertyName;
-
-		// xlink is a special case... we could maybe extend this to generic
-		// namespaced attributes but I'm not sure that's applicable in
-		// HTML5?
-		const method = /-/.test(node.name)
-			? '@setCustomElementData'
-			: name.slice(0, 6) === 'xlink:'
-				? '@setXlinkAttribute'
-				: '@setAttribute';
-
-		const isLegacyInputType = this.component.options.legacy && name === 'type' && this.parent.name === 'input';
-
-		const isDataSet = /^data-/.test(name) && !this.component.options.legacy && !node.namespace;
-		const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
-			return m[1].toUpperCase();
-		}) : name;
-
-		if (this.isDynamic) {
-			let value;
-
-			// TODO some of this code is repeated in Tag.ts — would be good to
-			// DRY it out if that's possible without introducing crazy indirection
-			if (this.chunks.length === 1) {
-				// single {tag} — may be a non-string
-				value = this.chunks[0].snippet;
-			} else {
-				// '{foo} {bar}' — treat as string concatenation
-				value =
-					(this.chunks[0].type === 'Text' ? '' : `"" + `) +
-					this.chunks
-						.map((chunk: Node) => {
-							if (chunk.type === 'Text') {
-								return stringify(chunk.data);
-							} else {
-								return chunk.getPrecedence() <= 13
-									? `(${chunk.snippet})`
-									: chunk.snippet;
-							}
-						})
-						.join(' + ');
-			}
-
-			const isSelectValueAttribute =
-				name === 'value' && node.name === 'select';
-
-			const shouldCache = this.shouldCache || isSelectValueAttribute;
-
-			const last = shouldCache && block.getUniqueName(
-				`${node.var}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value`
-			);
-
-			if (shouldCache) block.addVariable(last);
-
-			let updater;
-			const init = shouldCache ? `${last} = ${value}` : value;
-
-			if (isLegacyInputType) {
-				block.builders.hydrate.addLine(
-					`@setInputType(${node.var}, ${init});`
-				);
-				updater = `@setInputType(${node.var}, ${shouldCache ? last : value});`;
-			} else if (isSelectValueAttribute) {
-				// annoying special case
-				const isMultipleSelect = node.getStaticAttributeValue('multiple');
-				const i = block.getUniqueName('i');
-				const option = block.getUniqueName('option');
-
-				const ifStatement = isMultipleSelect
-					? deindent`
-						${option}.selected = ~${last}.indexOf(${option}.__value);`
-					: deindent`
-						if (${option}.__value === ${last}) {
-							${option}.selected = true;
-							break;
-						}`;
-
-				updater = deindent`
-					for (var ${i} = 0; ${i} < ${node.var}.options.length; ${i} += 1) {
-						var ${option} = ${node.var}.options[${i}];
-
-						${ifStatement}
-					}
-				`;
-
-				block.builders.mount.addBlock(deindent`
-					${last} = ${value};
-					${updater}
-				`);
-			} else if (propertyName) {
-				block.builders.hydrate.addLine(
-					`${node.var}.${propertyName} = ${init};`
-				);
-				updater = `${node.var}.${propertyName} = ${shouldCache ? last : value};`;
-			} else if (isDataSet) {
-				block.builders.hydrate.addLine(
-					`${node.var}.dataset.${camelCaseName} = ${init};`
-				);
-				updater = `${node.var}.dataset.${camelCaseName} = ${shouldCache ? last : value};`;
-			} else {
-				block.builders.hydrate.addLine(
-					`${method}(${node.var}, "${name}", ${init});`
-				);
-				updater = `${method}(${node.var}, "${name}", ${shouldCache ? last : value});`;
-			}
-
-			if (this.dependencies.size || isSelectValueAttribute) {
-				const dependencies = Array.from(this.dependencies);
-				const changedCheck = (
-					(block.hasOutros ? `!#current || ` : '') +
-					dependencies.map(dependency => `changed.${dependency}`).join(' || ')
-				);
-
-				const updateCachedValue = `${last} !== (${last} = ${value})`;
-
-				const condition = shouldCache ?
-					( dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue ) :
-					changedCheck;
-
-				block.builders.update.addConditional(
-					condition,
-					updater
-				);
-			}
-		} else {
-			const value = this.getValue();
-
-			const statement = (
-				isLegacyInputType
-					? `@setInputType(${node.var}, ${value});`
-					: propertyName
-						? `${node.var}.${propertyName} = ${value};`
-						: isDataSet
-							? `${node.var}.dataset.${camelCaseName} = ${value};`
-							: `${method}(${node.var}, "${name}", ${value});`
-			);
-
-			block.builders.hydrate.addLine(statement);
-
-			// special case – autofocus. has to be handled in a bit of a weird way
-			if (this.isTrue && name === 'autofocus') {
-				block.autofocus = node.var;
-			}
-		}
-
-		if (isIndirectlyBoundValue) {
-			const updateValue = `${node.var}.value = ${node.var}.__value;`;
-
-			block.builders.hydrate.addLine(updateValue);
-			if (this.isDynamic) block.builders.update.addLine(updateValue);
-		}
-	}
-
-	renderStyle(
-		block: Block,
-		styleProps: StyleProp[]
-	) {
-		styleProps.forEach((prop: StyleProp) => {
-			let value;
-
-			if (isDynamic(prop.value)) {
-				const propDependencies = new Set();
-				let shouldCache;
-
-				value =
-					((prop.value.length === 1 || prop.value[0].type === 'Text') ? '' : `"" + `) +
-					prop.value
-						.map((chunk: Node) => {
-							if (chunk.type === 'Text') {
-								return stringify(chunk.data);
-							} else {
-								const { dependencies, snippet } = chunk;
-
-								dependencies.forEach(d => {
-									propDependencies.add(d);
-								});
-
-								return chunk.getPrecedence() <= 13 ? `(${snippet})` : snippet;
-							}
-						})
-						.join(' + ');
-
-				if (propDependencies.size) {
-					const dependencies = Array.from(propDependencies);
-					const condition = (
-						(block.hasOutros ? `!#current || ` : '') +
-						dependencies.map(dependency => `changed.${dependency}`).join(' || ')
-					);
-
-					block.builders.update.addConditional(
-						condition,
-						`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
-					);
-				}
-			} else {
-				value = stringify(prop.value[0].data);
-			}
-
-			block.builders.hydrate.addLine(
-				`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
-			);
-		});
-	}
-
 	stringifyForSsr() {
 		return this.chunks
 			.map((chunk: Node) => {
@@ -350,353 +114,4 @@ export default class Attribute extends Node {
 			})
 			.join('');
 	}
-}
-
-// source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
-const attributeLookup = {
-	accept: { appliesTo: ['form', 'input'] },
-	'accept-charset': { propertyName: 'acceptCharset', appliesTo: ['form'] },
-	accesskey: { propertyName: 'accessKey' },
-	action: { appliesTo: ['form'] },
-	align: {
-		appliesTo: [
-			'applet',
-			'caption',
-			'col',
-			'colgroup',
-			'hr',
-			'iframe',
-			'img',
-			'table',
-			'tbody',
-			'td',
-			'tfoot',
-			'th',
-			'thead',
-			'tr',
-		],
-	},
-	allowfullscreen: { propertyName: 'allowFullscreen', appliesTo: ['iframe'] },
-	alt: { appliesTo: ['applet', 'area', 'img', 'input'] },
-	async: { appliesTo: ['script'] },
-	autocomplete: { appliesTo: ['form', 'input'] },
-	autofocus: { appliesTo: ['button', 'input', 'keygen', 'select', 'textarea'] },
-	autoplay: { appliesTo: ['audio', 'video'] },
-	autosave: { appliesTo: ['input'] },
-	bgcolor: {
-		propertyName: 'bgColor',
-		appliesTo: [
-			'body',
-			'col',
-			'colgroup',
-			'marquee',
-			'table',
-			'tbody',
-			'tfoot',
-			'td',
-			'th',
-			'tr',
-		],
-	},
-	border: { appliesTo: ['img', 'object', 'table'] },
-	buffered: { appliesTo: ['audio', 'video'] },
-	challenge: { appliesTo: ['keygen'] },
-	charset: { appliesTo: ['meta', 'script'] },
-	checked: { appliesTo: ['command', 'input'] },
-	cite: { appliesTo: ['blockquote', 'del', 'ins', 'q'] },
-	class: { propertyName: 'className' },
-	code: { appliesTo: ['applet'] },
-	codebase: { propertyName: 'codeBase', appliesTo: ['applet'] },
-	color: { appliesTo: ['basefont', 'font', 'hr'] },
-	cols: { appliesTo: ['textarea'] },
-	colspan: { propertyName: 'colSpan', appliesTo: ['td', 'th'] },
-	content: { appliesTo: ['meta'] },
-	contenteditable: { propertyName: 'contentEditable' },
-	contextmenu: {},
-	controls: { appliesTo: ['audio', 'video'] },
-	coords: { appliesTo: ['area'] },
-	data: { appliesTo: ['object'] },
-	datetime: { propertyName: 'dateTime', appliesTo: ['del', 'ins', 'time'] },
-	default: { appliesTo: ['track'] },
-	defer: { appliesTo: ['script'] },
-	dir: {},
-	dirname: { propertyName: 'dirName', appliesTo: ['input', 'textarea'] },
-	disabled: {
-		appliesTo: [
-			'button',
-			'command',
-			'fieldset',
-			'input',
-			'keygen',
-			'optgroup',
-			'option',
-			'select',
-			'textarea',
-		],
-	},
-	download: { appliesTo: ['a', 'area'] },
-	draggable: {},
-	dropzone: {},
-	enctype: { appliesTo: ['form'] },
-	for: { propertyName: 'htmlFor', appliesTo: ['label', 'output'] },
-	form: {
-		appliesTo: [
-			'button',
-			'fieldset',
-			'input',
-			'keygen',
-			'label',
-			'meter',
-			'object',
-			'output',
-			'progress',
-			'select',
-			'textarea',
-		],
-	},
-	formaction: { appliesTo: ['input', 'button'] },
-	headers: { appliesTo: ['td', 'th'] },
-	height: {
-		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
-	hidden: {},
-	high: { appliesTo: ['meter'] },
-	href: { appliesTo: ['a', 'area', 'base', 'link'] },
-	hreflang: { appliesTo: ['a', 'area', 'link'] },
-	'http-equiv': { propertyName: 'httpEquiv', appliesTo: ['meta'] },
-	icon: { appliesTo: ['command'] },
-	id: {},
-	indeterminate: { appliesTo: ['input'] },
-	ismap: { propertyName: 'isMap', appliesTo: ['img'] },
-	itemprop: {},
-	keytype: { appliesTo: ['keygen'] },
-	kind: { appliesTo: ['track'] },
-	label: { appliesTo: ['track'] },
-	lang: {},
-	language: { appliesTo: ['script'] },
-	loop: { appliesTo: ['audio', 'bgsound', 'marquee', 'video'] },
-	low: { appliesTo: ['meter'] },
-	manifest: { appliesTo: ['html'] },
-	max: { appliesTo: ['input', 'meter', 'progress'] },
-	maxlength: { propertyName: 'maxLength', appliesTo: ['input', 'textarea'] },
-	media: { appliesTo: ['a', 'area', 'link', 'source', 'style'] },
-	method: { appliesTo: ['form'] },
-	min: { appliesTo: ['input', 'meter'] },
-	multiple: { appliesTo: ['input', 'select'] },
-	muted: { appliesTo: ['audio', 'video'] },
-	name: {
-		appliesTo: [
-			'button',
-			'form',
-			'fieldset',
-			'iframe',
-			'input',
-			'keygen',
-			'object',
-			'output',
-			'select',
-			'textarea',
-			'map',
-			'meta',
-			'param',
-		],
-	},
-	novalidate: { propertyName: 'noValidate', appliesTo: ['form'] },
-	open: { appliesTo: ['details'] },
-	optimum: { appliesTo: ['meter'] },
-	pattern: { appliesTo: ['input'] },
-	ping: { appliesTo: ['a', 'area'] },
-	placeholder: { appliesTo: ['input', 'textarea'] },
-	poster: { appliesTo: ['video'] },
-	preload: { appliesTo: ['audio', 'video'] },
-	radiogroup: { appliesTo: ['command'] },
-	readonly: { propertyName: 'readOnly', appliesTo: ['input', 'textarea'] },
-	rel: { appliesTo: ['a', 'area', 'link'] },
-	required: { appliesTo: ['input', 'select', 'textarea'] },
-	reversed: { appliesTo: ['ol'] },
-	rows: { appliesTo: ['textarea'] },
-	rowspan: { propertyName: 'rowSpan', appliesTo: ['td', 'th'] },
-	sandbox: { appliesTo: ['iframe'] },
-	scope: { appliesTo: ['th'] },
-	scoped: { appliesTo: ['style'] },
-	seamless: { appliesTo: ['iframe'] },
-	selected: { appliesTo: ['option'] },
-	shape: { appliesTo: ['a', 'area'] },
-	size: { appliesTo: ['input', 'select'] },
-	sizes: { appliesTo: ['link', 'img', 'source'] },
-	span: { appliesTo: ['col', 'colgroup'] },
-	spellcheck: {},
-	src: {
-		appliesTo: [
-			'audio',
-			'embed',
-			'iframe',
-			'img',
-			'input',
-			'script',
-			'source',
-			'track',
-			'video',
-		],
-	},
-	srcdoc: { appliesTo: ['iframe'] },
-	srclang: { appliesTo: ['track'] },
-	srcset: { appliesTo: ['img'] },
-	start: { appliesTo: ['ol'] },
-	step: { appliesTo: ['input'] },
-	style: { propertyName: 'style.cssText' },
-	summary: { appliesTo: ['table'] },
-	tabindex: { propertyName: 'tabIndex' },
-	target: { appliesTo: ['a', 'area', 'base', 'form'] },
-	title: {},
-	type: {
-		appliesTo: [
-			'button',
-			'command',
-			'embed',
-			'object',
-			'script',
-			'source',
-			'style',
-			'menu',
-		],
-	},
-	usemap: { propertyName: 'useMap', appliesTo: ['img', 'input', 'object'] },
-	value: {
-		appliesTo: [
-			'button',
-			'option',
-			'input',
-			'li',
-			'meter',
-			'progress',
-			'param',
-			'select',
-			'textarea',
-		],
-	},
-	volume: { appliesTo: ['audio', 'video'] },
-	width: {
-		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
-	},
-	wrap: { appliesTo: ['textarea'] },
-};
-
-Object.keys(attributeLookup).forEach(name => {
-	const metadata = attributeLookup[name];
-	if (!metadata.propertyName) metadata.propertyName = name;
-});
-
-function optimizeStyle(value: Node[]) {
-	let expectingKey = true;
-	let i = 0;
-
-	const props: { key: string, value: Node[] }[] = [];
-	let chunks = value.slice();
-
-	while (chunks.length) {
-		const chunk = chunks[0];
-
-		if (chunk.type !== 'Text') return null;
-
-		const keyMatch = /^\s*([\w-]+):\s*/.exec(chunk.data);
-		if (!keyMatch) return null;
-
-		const key = keyMatch[1];
-
-		const offset = keyMatch.index + keyMatch[0].length;
-		const remainingData = chunk.data.slice(offset);
-
-		if (remainingData) {
-			chunks[0] = {
-				start: chunk.start + offset,
-				end: chunk.end,
-				type: 'Text',
-				data: remainingData
-			};
-		} else {
-			chunks.shift();
-		}
-
-		const result = getStyleValue(chunks);
-		if (!result) return null;
-
-		props.push({ key, value: result.value });
-		chunks = result.chunks;
-	}
-
-	return props;
-}
-
-function getStyleValue(chunks: Node[]) {
-	const value: Node[] = [];
-
-	let inUrl = false;
-	let quoteMark = null;
-	let escaped = false;
-
-	while (chunks.length) {
-		const chunk = chunks.shift();
-
-		if (chunk.type === 'Text') {
-			let c = 0;
-			while (c < chunk.data.length) {
-				const char = chunk.data[c];
-
-				if (escaped) {
-					escaped = false;
-				} else if (char === '\\') {
-					escaped = true;
-				} else if (char === quoteMark) {
-					quoteMark === null;
-				} else if (char === '"' || char === "'") {
-					quoteMark = char;
-				} else if (char === ')' && inUrl) {
-					inUrl = false;
-				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
-					inUrl = true;
-				} else if (char === ';' && !inUrl && !quoteMark) {
-					break;
-				}
-
-				c += 1;
-			}
-
-			if (c > 0) {
-				value.push({
-					type: 'Text',
-					start: chunk.start,
-					end: chunk.start + c,
-					data: chunk.data.slice(0, c)
-				});
-			}
-
-			while (/[;\s]/.test(chunk.data[c])) c += 1;
-			const remainingData = chunk.data.slice(c);
-
-			if (remainingData) {
-				chunks.unshift({
-					start: chunk.start + c,
-					end: chunk.end,
-					type: 'Text',
-					data: remainingData
-				});
-
-				break;
-			}
-		}
-
-		else {
-			value.push(chunk);
-		}
-	}
-
-	return {
-		chunks,
-		value
-	};
-}
-
-function isDynamic(value: Node[]) {
-	return value.length > 1 || value[0].type !== 'Text';
-}
+}
\ No newline at end of file
diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts
index e5abfc91ea..ed376fe9fd 100644
--- a/src/compile/nodes/EachBlock.ts
+++ b/src/compile/nodes/EachBlock.ts
@@ -78,441 +78,4 @@ export default class EachBlock extends Node {
 			? new ElseBlock(component, this, this.scope, info.else)
 			: null;
 	}
-
-	init(
-		block: Block,
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) {
-		this.cannotUseInnerHTML();
-
-		this.var = block.getUniqueName(`each`);
-		this.iterations = block.getUniqueName(`${this.var}_blocks`);
-		this.get_each_context = this.component.getUniqueName(`get_${this.var}_context`);
-
-		const { dependencies } = this.expression;
-		block.addDependencies(dependencies);
-
-		this.block = block.child({
-			comment: createDebuggingComment(this, this.component),
-			name: this.component.getUniqueName('create_each_block'),
-			key: this.key,
-
-			bindings: new Map(block.bindings)
-		});
-
-		this.each_block_value = this.component.getUniqueName('each_value');
-
-		const indexName = this.index || this.component.getUniqueName(`${this.context}_index`);
-
-		this.contexts.forEach(prop => {
-			this.block.bindings.set(prop.key.name, `ctx.${this.each_block_value}[ctx.${indexName}]${prop.tail}`);
-		});
-
-		if (this.index) {
-			this.block.getUniqueName(this.index); // this prevents name collisions (#1254)
-		}
-
-		this.contextProps = this.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`);
-
-		// TODO only add these if necessary
-		this.contextProps.push(
-			`child_ctx.${this.each_block_value} = list;`,
-			`child_ctx.${indexName} = i;`
-		);
-
-		this.component.target.blocks.push(this.block);
-		this.initChildren(this.block, stripWhitespace, nextSibling);
-		block.addDependencies(this.block.dependencies);
-		this.block.hasUpdateMethod = this.block.dependencies.size > 0;
-
-		if (this.else) {
-			this.else.block = block.child({
-				comment: createDebuggingComment(this.else, this.component),
-				name: this.component.getUniqueName(`${this.block.name}_else`),
-			});
-
-			this.component.target.blocks.push(this.else.block);
-			this.else.initChildren(
-				this.else.block,
-				stripWhitespace,
-				nextSibling
-			);
-			this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
-		}
-
-		if (this.block.hasOutros || (this.else && this.else.block.hasOutros)) {
-			block.addOutro();
-		}
-	}
-
-	build(
-		block: Block,
-		parentNode: string,
-		parentNodes: string
-	) {
-		if (this.children.length === 0) return;
-
-		const { component } = this;
-
-		const each = this.var;
-
-		const create_each_block = this.block.name;
-		const iterations = this.iterations;
-
-		const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
-		const anchor = needsAnchor
-			? block.getUniqueName(`${each}_anchor`)
-			: (this.next && this.next.var) || 'null';
-
-		// hack the sourcemap, so that if data is missing the bug
-		// is easy to find
-		let c = this.start + 2;
-		while (component.source[c] !== 'e') c += 1;
-		component.code.overwrite(c, c + 4, 'length');
-		const length = `[✂${c}-${c+4}✂]`;
-
-		const mountOrIntro = (this.block.hasIntroMethod || this.block.hasOutroMethod) ? 'i' : 'm';
-		const vars = {
-			each,
-			create_each_block,
-			length,
-			iterations,
-			anchor,
-			mountOrIntro,
-		};
-
-		const { snippet } = this.expression;
-
-		block.builders.init.addLine(`var ${this.each_block_value} = ${snippet};`);
-
-		this.component.target.blocks.push(deindent`
-			function ${this.get_each_context}(ctx, list, i) {
-				const child_ctx = Object.create(ctx);
-				${this.contextProps}
-				return child_ctx;
-			}
-		`);
-
-		if (this.key) {
-			this.buildKeyed(block, parentNode, parentNodes, snippet, vars);
-		} else {
-			this.buildUnkeyed(block, parentNode, parentNodes, snippet, vars);
-		}
-
-		if (needsAnchor) {
-			block.addElement(
-				anchor,
-				`@createComment()`,
-				parentNodes && `@createComment()`,
-				parentNode
-			);
-		}
-
-		if (this.else) {
-			const each_block_else = component.getUniqueName(`${each}_else`);
-			const mountOrIntro = (this.else.block.hasIntroMethod || this.else.block.hasOutroMethod) ? 'i' : 'm';
-
-			block.builders.init.addLine(`var ${each_block_else} = null;`);
-
-			// TODO neaten this up... will end up with an empty line in the block
-			block.builders.init.addBlock(deindent`
-				if (!${this.each_block_value}.${length}) {
-					${each_block_else} = ${this.else.block.name}(#component, ctx);
-					${each_block_else}.c();
-				}
-			`);
-
-			block.builders.mount.addBlock(deindent`
-				if (${each_block_else}) {
-					${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
-				}
-			`);
-
-			const initialMountNode = parentNode || `${anchor}.parentNode`;
-
-			if (this.else.block.hasUpdateMethod) {
-				block.builders.update.addBlock(deindent`
-					if (!${this.each_block_value}.${length} && ${each_block_else}) {
-						${each_block_else}.p(changed, ctx);
-					} else if (!${this.each_block_value}.${length}) {
-						${each_block_else} = ${this.else.block.name}(#component, ctx);
-						${each_block_else}.c();
-						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
-					} else if (${each_block_else}) {
-						${each_block_else}.d(1);
-						${each_block_else} = null;
-					}
-				`);
-			} else {
-				block.builders.update.addBlock(deindent`
-					if (${this.each_block_value}.${length}) {
-						if (${each_block_else}) {
-							${each_block_else}.d(1);
-							${each_block_else} = null;
-						}
-					} else if (!${each_block_else}) {
-						${each_block_else} = ${this.else.block.name}(#component, ctx);
-						${each_block_else}.c();
-						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
-					}
-				`);
-			}
-
-			block.builders.destroy.addBlock(deindent`
-				if (${each_block_else}) ${each_block_else}.d(${parentNode ? '' : 'detach'});
-			`);
-		}
-
-		this.children.forEach((child: Node) => {
-			child.build(this.block, null, 'nodes');
-		});
-
-		if (this.else) {
-			this.else.children.forEach((child: Node) => {
-				child.build(this.else.block, null, 'nodes');
-			});
-		}
-	}
-
-	buildKeyed(
-		block: Block,
-		parentNode: string,
-		parentNodes: string,
-		snippet: string,
-		{
-			each,
-			create_each_block,
-			length,
-			anchor,
-			mountOrIntro,
-		}
-	) {
-		const get_key = block.getUniqueName('get_key');
-		const blocks = block.getUniqueName(`${each}_blocks`);
-		const lookup = block.getUniqueName(`${each}_lookup`);
-
-		block.addVariable(blocks, '[]');
-		block.addVariable(lookup, `@blankObject()`);
-
-		if (this.children[0].isDomNode()) {
-			this.block.first = this.children[0].var;
-		} else {
-			this.block.first = this.block.getUniqueName('first');
-			this.block.addElement(
-				this.block.first,
-				`@createComment()`,
-				parentNodes && `@createComment()`,
-				null
-			);
-		}
-
-		block.builders.init.addBlock(deindent`
-			const ${get_key} = ctx => ${this.key.snippet};
-
-			for (var #i = 0; #i < ${this.each_block_value}.${length}; #i += 1) {
-				let child_ctx = ${this.get_each_context}(ctx, ${this.each_block_value}, #i);
-				let key = ${get_key}(child_ctx);
-				${blocks}[#i] = ${lookup}[key] = ${create_each_block}(#component, key, child_ctx);
-			}
-		`);
-
-		const initialMountNode = parentNode || '#target';
-		const updateMountNode = this.getUpdateMountNode(anchor);
-		const anchorNode = parentNode ? 'null' : 'anchor';
-
-		block.builders.create.addBlock(deindent`
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].c();
-		`);
-
-		if (parentNodes) {
-			block.builders.claim.addBlock(deindent`
-				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].l(${parentNodes});
-			`);
-		}
-
-		block.builders.mount.addBlock(deindent`
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
-		`);
-
-		const dynamic = this.block.hasUpdateMethod;
-
-		const rects = block.getUniqueName('rects');
-		const destroy = this.block.hasAnimation
-			? `@fixAndOutroAndDestroyBlock`
-			: this.block.hasOutros
-				? `@outroAndDestroyBlock`
-				: `@destroyBlock`;
-
-		block.builders.update.addBlock(deindent`
-			const ${this.each_block_value} = ${snippet};
-
-			${this.block.hasOutros && `@groupOutros();`}
-			${this.block.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].r();`}
-			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
-			${this.block.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].a();`}
-		`);
-
-		if (this.block.hasOutros && this.component.options.nestedTransitions) {
-			const countdown = block.getUniqueName('countdown');
-			block.builders.outro.addBlock(deindent`
-				const ${countdown} = @callAfter(#outrocallback, ${blocks}.length);
-				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown});
-			`);
-		}
-
-		block.builders.destroy.addBlock(deindent`
-			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
-		`);
-	}
-
-	buildUnkeyed(
-		block: Block,
-		parentNode: string,
-		parentNodes: string,
-		snippet: string,
-		{
-			create_each_block,
-			length,
-			iterations,
-			anchor,
-			mountOrIntro,
-		}
-	) {
-		block.builders.init.addBlock(deindent`
-			var ${iterations} = [];
-
-			for (var #i = 0; #i < ${this.each_block_value}.${length}; #i += 1) {
-				${iterations}[#i] = ${create_each_block}(#component, ${this.get_each_context}(ctx, ${this.each_block_value}, #i));
-			}
-		`);
-
-		const initialMountNode = parentNode || '#target';
-		const updateMountNode = this.getUpdateMountNode(anchor);
-		const anchorNode = parentNode ? 'null' : 'anchor';
-
-		block.builders.create.addBlock(deindent`
-			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-				${iterations}[#i].c();
-			}
-		`);
-
-		if (parentNodes) {
-			block.builders.claim.addBlock(deindent`
-				for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-					${iterations}[#i].l(${parentNodes});
-				}
-			`);
-		}
-
-		block.builders.mount.addBlock(deindent`
-			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
-				${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
-			}
-		`);
-
-		const allDependencies = new Set(this.block.dependencies);
-		const { dependencies } = this.expression;
-		dependencies.forEach((dependency: string) => {
-			allDependencies.add(dependency);
-		});
-
-		const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock')
-		if (outroBlock) {
-			block.builders.init.addBlock(deindent`
-				function ${outroBlock}(i, detach, fn) {
-					if (${iterations}[i]) {
-						${iterations}[i].o(() => {
-							if (detach) {
-								${iterations}[i].d(detach);
-								${iterations}[i] = null;
-							}
-							if (fn) fn();
-						});
-					}
-				}
-			`);
-		}
-
-		// TODO do this for keyed blocks as well
-		const condition = Array.from(allDependencies)
-			.map(dependency => `changed.${dependency}`)
-			.join(' || ');
-
-		if (condition !== '') {
-			const forLoopBody = this.block.hasUpdateMethod
-				? (this.block.hasIntros || this.block.hasOutros)
-					? deindent`
-						if (${iterations}[#i]) {
-							${iterations}[#i].p(changed, child_ctx);
-						} else {
-							${iterations}[#i] = ${create_each_block}(#component, child_ctx);
-							${iterations}[#i].c();
-						}
-						${iterations}[#i].i(${updateMountNode}, ${anchor});
-					`
-					: deindent`
-						if (${iterations}[#i]) {
-							${iterations}[#i].p(changed, child_ctx);
-						} else {
-							${iterations}[#i] = ${create_each_block}(#component, child_ctx);
-							${iterations}[#i].c();
-							${iterations}[#i].m(${updateMountNode}, ${anchor});
-						}
-					`
-				: deindent`
-					${iterations}[#i] = ${create_each_block}(#component, child_ctx);
-					${iterations}[#i].c();
-					${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor});
-				`;
-
-			const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
-
-			let destroy;
-
-			if (this.block.hasOutros) {
-				destroy = deindent`
-					@groupOutros();
-					for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1);
-				`;
-			} else {
-				destroy = deindent`
-					for (; #i < ${iterations}.length; #i += 1) {
-						${iterations}[#i].d(1);
-					}
-					${iterations}.length = ${this.each_block_value}.${length};
-				`;
-			}
-
-			block.builders.update.addBlock(deindent`
-				if (${condition}) {
-					${this.each_block_value} = ${snippet};
-
-					for (var #i = ${start}; #i < ${this.each_block_value}.${length}; #i += 1) {
-						const child_ctx = ${this.get_each_context}(ctx, ${this.each_block_value}, #i);
-
-						${forLoopBody}
-					}
-
-					${destroy}
-				}
-			`);
-		}
-
-		if (outroBlock && this.component.options.nestedTransitions) {
-			const countdown = block.getUniqueName('countdown');
-			block.builders.outro.addBlock(deindent`
-				${iterations} = ${iterations}.filter(Boolean);
-				const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
-				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
-			);
-		}
-
-		block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
-	}
-
-	remount(name: string) {
-		// TODO consider keyed blocks
-		return `for (var #i = 0; #i < ${this.iterations}.length; #i += 1) ${this.iterations}[#i].m(${name}._slotted.default, null);`;
-	}
 }
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
index cdf3543a60..5428f7818e 100644
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -113,7 +113,6 @@ export default class Element extends Node {
 	actions: Action[];
 	bindings: Binding[];
 	classes: Class[];
-	classDependencies: string[];
 	handlers: EventHandler[];
 	intro?: Transition;
 	outro?: Transition;
@@ -144,7 +143,6 @@ export default class Element extends Node {
 		this.actions = [];
 		this.bindings = [];
 		this.classes = [];
-		this.classDependencies = [];
 		this.handlers = [];
 
 		this.intro = null;
@@ -614,737 +612,6 @@ export default class Element extends Node {
 		}
 	}
 
-	init(
-		block: Block,
-		stripWhitespace: boolean,
-		nextSibling: Node
-	) {
-		if (this.name === 'slot' || this.name === 'option' || this.component.options.dev) {
-			this.cannotUseInnerHTML();
-		}
-
-		this.var = block.getUniqueName(
-			this.name.replace(/[^a-zA-Z0-9_$]/g, '_')
-		);
-
-		this.attributes.forEach(attr => {
-			if (
-				attr.chunks &&
-				attr.chunks.length &&
-				(attr.chunks.length > 1 || attr.chunks[0].type !== 'Text')
-			) {
-				this.parent.cannotUseInnerHTML();
-			}
-			if (attr.dependencies.size) {
-				block.addDependencies(attr.dependencies);
-
-				// special case — <option value={foo}> — see below
-				if (this.name === 'option' && attr.name === 'value') {
-					let select = this.parent;
-					while (select && (select.type !== 'Element' || select.name !== 'select')) select = select.parent;
-
-					if (select && select.selectBindingDependencies) {
-						select.selectBindingDependencies.forEach(prop => {
-							attr.dependencies.forEach((dependency: string) => {
-								this.component.indirectDependencies.get(prop).add(dependency);
-							});
-						});
-					}
-				}
-			}
-		});
-
-		this.actions.forEach(action => {
-			this.parent.cannotUseInnerHTML();
-			if (action.expression) {
-				block.addDependencies(action.expression.dependencies);
-			}
-		});
-
-		this.bindings.forEach(binding => {
-			this.parent.cannotUseInnerHTML();
-			block.addDependencies(binding.value.dependencies);
-		});
-
-		this.classes.forEach(classDir => {
-			this.parent.cannotUseInnerHTML();
-			if (classDir.expression) {
-				block.addDependencies(classDir.expression.dependencies);
-			}
-		});
-
-		this.handlers.forEach(handler => {
-			this.parent.cannotUseInnerHTML();
-			block.addDependencies(handler.dependencies);
-		});
-
-		if (this.intro || this.outro || this.animation || this.ref) {
-			this.parent.cannotUseInnerHTML();
-		}
-
-		if (this.intro) block.addIntro();
-		if (this.outro) block.addOutro();
-		if (this.animation) block.addAnimation();
-
-		const valueAttribute = this.attributes.find((attribute: Attribute) => attribute.name === 'value');
-
-		// special case — in a case like this...
-		//
-		//   <select bind:value='foo'>
-		//     <option value='{bar}'>bar</option>
-		//     <option value='{baz}'>baz</option>
-		//   </option>
-		//
-		// ...we need to know that `foo` depends on `bar` and `baz`,
-		// so that if `foo.qux` changes, we know that we need to
-		// mark `bar` and `baz` as dirty too
-		if (this.name === 'select') {
-			const binding = this.bindings.find(node => node.name === 'value');
-			if (binding) {
-				// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
-				const dependencies = binding.value.dependencies;
-				this.selectBindingDependencies = dependencies;
-				dependencies.forEach((prop: string) => {
-					this.component.indirectDependencies.set(prop, new Set());
-				});
-			} else {
-				this.selectBindingDependencies = null;
-			}
-		}
-
-		const slot = this.getStaticAttributeValue('slot');
-		if (slot && this.hasAncestor('InlineComponent')) {
-			this.cannotUseInnerHTML();
-			this.slotted = true;
-			// TODO validate slots — no nesting, no dynamic names...
-			const component = this.findNearest(/^InlineComponent/);
-			component._slots.add(slot);
-		}
-
-		if (this.children.length) {
-			if (this.name === 'pre' || this.name === 'textarea') stripWhitespace = false;
-			this.initChildren(block, stripWhitespace, nextSibling);
-		}
-	}
-
-	build(
-		block: Block,
-		parentNode: string,
-		parentNodes: string
-	) {
-		const { component } = this;
-
-		if (this.name === 'slot') {
-			const slotName = this.getStaticAttributeValue('name') || 'default';
-			this.component.slots.add(slotName);
-		}
-
-		if (this.name === 'noscript') return;
-
-		const node = this.var;
-		const nodes = parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
-
-		const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
-		const prop = slot && quotePropIfNecessary(slot.chunks[0].data);
-		const initialMountNode = this.slotted ?
-			`${this.findNearest(/^InlineComponent/).var}._slotted${prop}` : // TODO this looks bonkers
-			parentNode;
-
-		block.addVariable(node);
-		const renderStatement = getRenderStatement(this.namespace, this.name);
-		block.builders.create.addLine(
-			`${node} = ${renderStatement};`
-		);
-
-		if (this.component.options.hydratable) {
-			if (parentNodes) {
-				block.builders.claim.addBlock(deindent`
-					${node} = ${getClaimStatement(component, this.namespace, parentNodes, this)};
-					var ${nodes} = @children(${this.name === 'template' ? `${node}.content` : node});
-				`);
-			} else {
-				block.builders.claim.addLine(
-					`${node} = ${renderStatement};`
-				);
-			}
-		}
-
-		if (initialMountNode) {
-			block.builders.mount.addLine(
-				`@append(${initialMountNode}, ${node});`
-			);
-
-			if (initialMountNode === 'document.head') {
-				block.builders.destroy.addLine(`@detachNode(${node});`);
-			}
-		} else {
-			block.builders.mount.addLine(`@insert(#target, ${node}, anchor);`);
-
-			// TODO we eventually need to consider what happens to elements
-			// that belong to the same outgroup as an outroing element...
-			block.builders.destroy.addConditional('detach', `@detachNode(${node});`);
-		}
-
-		// insert static children with textContent or innerHTML
-		if (!this.namespace && this.canUseInnerHTML && this.children.length > 0) {
-			if (this.children.length === 1 && this.children[0].type === 'Text') {
-				block.builders.create.addLine(
-					`${node}.textContent = ${stringify(this.children[0].data)};`
-				);
-			} else {
-				block.builders.create.addLine(
-					`${node}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};`
-				);
-			}
-		} else {
-			this.children.forEach((child: Node) => {
-				child.build(block, this.name === 'template' ? `${node}.content` : node, nodes);
-			});
-		}
-
-		let hasHoistedEventHandlerOrBinding = (
-			//(this.hasAncestor('EachBlock') && this.bindings.length > 0) ||
-			this.handlers.some(handler => handler.shouldHoist)
-		);
-		const eventHandlerOrBindingUsesComponent = (
-			this.bindings.length > 0 ||
-			this.handlers.some(handler => handler.usesComponent)
-		);
-
-		const eventHandlerOrBindingUsesContext = (
-			this.bindings.some(binding => binding.usesContext) ||
-			this.handlers.some(handler => handler.usesContext)
-		);
-
-		if (hasHoistedEventHandlerOrBinding) {
-			const initialProps: string[] = [];
-			const updates: string[] = [];
-
-			if (eventHandlerOrBindingUsesComponent) {
-				const component = block.alias('component');
-				initialProps.push(component === 'component' ? 'component' : `component: ${component}`);
-			}
-
-			if (eventHandlerOrBindingUsesContext) {
-				initialProps.push(`ctx`);
-				block.builders.update.addLine(`${node}._svelte.ctx = ctx;`);
-				block.maintainContext = true;
-			}
-
-			if (initialProps.length) {
-				block.builders.hydrate.addBlock(deindent`
-					${node}._svelte = { ${initialProps.join(', ')} };
-				`);
-			}
-		} else {
-			if (eventHandlerOrBindingUsesContext) {
-				block.maintainContext = true;
-			}
-		}
-
-		this.addBindings(block);
-		this.addEventHandlers(block);
-		if (this.ref) this.addRef(block);
-		this.addAttributes(block);
-		this.addTransitions(block);
-		this.addAnimation(block);
-		this.addActions(block);
-		this.addClasses(block);
-
-		if (this.initialUpdate) {
-			block.builders.mount.addBlock(this.initialUpdate);
-		}
-
-		if (nodes) {
-			block.builders.claim.addLine(
-				`${nodes}.forEach(@detachNode);`
-			);
-		}
-
-		function toHTML(node: Element | Text) {
-			if (node.type === 'Text') {
-				return node.parent &&
-					node.parent.type === 'Element' &&
-					(node.parent.name === 'script' || node.parent.name === 'style')
-					? node.data
-					: escapeHTML(node.data);
-			}
-
-			if (node.name === 'noscript') return '';
-
-			let open = `<${node.name}`;
-
-			node.attributes.forEach((attr: Node) => {
-				open += ` ${fixAttributeCasing(attr.name)}${stringifyAttributeValue(attr.chunks)}`
-			});
-
-			if (isVoidElementName(node.name)) return open + '>';
-
-			return `${open}>${node.children.map(toHTML).join('')}</${node.name}>`;
-		}
-
-		if (this.component.options.dev) {
-			const loc = this.component.locate(this.start);
-			block.builders.hydrate.addLine(
-				`@addLoc(${this.var}, ${this.component.fileVar}, ${loc.line}, ${loc.column}, ${this.start});`
-			);
-		}
-	}
-
-	addBindings(
-		block: Block
-	) {
-		if (this.bindings.length === 0) return;
-
-		if (this.name === 'select' || this.isMediaNode()) this.component.target.hasComplexBindings = true;
-
-		const needsLock = this.name !== 'input' || !/radio|checkbox|range|color/.test(this.getStaticAttributeValue('type'));
-
-		// TODO munge in constructor
-		const mungedBindings = this.bindings.map(binding => binding.munge(block));
-
-		const lock = mungedBindings.some(binding => binding.needsLock) ?
-			block.getUniqueName(`${this.var}_updating`) :
-			null;
-
-		if (lock) block.addVariable(lock, 'false');
-
-		const groups = events
-			.map(event => {
-				return {
-					events: event.eventNames,
-					bindings: mungedBindings.filter(binding => event.filter(this, binding.name))
-				};
-			})
-			.filter(group => group.bindings.length);
-
-		groups.forEach(group => {
-			const handler = block.getUniqueName(`${this.var}_${group.events.join('_')}_handler`);
-
-			const needsLock = group.bindings.some(binding => binding.needsLock);
-
-			group.bindings.forEach(binding => {
-				if (!binding.updateDom) return;
-
-				const updateConditions = needsLock ? [`!${lock}`] : [];
-				if (binding.updateCondition) updateConditions.push(binding.updateCondition);
-
-				block.builders.update.addLine(
-					updateConditions.length ? `if (${updateConditions.join(' && ')}) ${binding.updateDom}` : binding.updateDom
-				);
-			});
-
-			const usesContext = group.bindings.some(binding => binding.handler.usesContext);
-			const usesState = group.bindings.some(binding => binding.handler.usesState);
-			const usesStore = group.bindings.some(binding => binding.handler.usesStore);
-			const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
-
-			const props = new Set();
-			const storeProps = new Set();
-			group.bindings.forEach(binding => {
-				binding.handler.props.forEach(prop => {
-					props.add(prop);
-				});
-
-				binding.handler.storeProps.forEach(prop => {
-					storeProps.add(prop);
-				});
-			}); // TODO use stringifyProps here, once indenting is fixed
-
-			// media bindings — awkward special case. The native timeupdate events
-			// fire too infrequently, so we need to take matters into our
-			// own hands
-			let animation_frame;
-			if (group.events[0] === 'timeupdate') {
-				animation_frame = block.getUniqueName(`${this.var}_animationframe`);
-				block.addVariable(animation_frame);
-			}
-
-			block.builders.init.addBlock(deindent`
-				function ${handler}() {
-					${
-						animation_frame && deindent`
-							cancelAnimationFrame(${animation_frame});
-							if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
-					}
-					${usesStore && `var $ = #component.store.get();`}
-					${needsLock && `${lock} = true;`}
-					${mutations.length > 0 && mutations}
-					${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
-					${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
-					${needsLock && `${lock} = false;`}
-				}
-			`);
-
-			group.events.forEach(name => {
-				if (name === 'resize') {
-					// special case
-					const resize_listener = block.getUniqueName(`${this.var}_resize_listener`);
-					block.addVariable(resize_listener);
-
-					block.builders.mount.addLine(
-						`${resize_listener} = @addResizeListener(${this.var}, ${handler});`
-					);
-
-					block.builders.destroy.addLine(
-						`${resize_listener}.cancel();`
-					);
-				} else {
-					block.builders.hydrate.addLine(
-						`@addListener(${this.var}, "${name}", ${handler});`
-					);
-
-					block.builders.destroy.addLine(
-						`@removeListener(${this.var}, "${name}", ${handler});`
-					);
-				}
-			});
-
-			const allInitialStateIsDefined = group.bindings
-				.map(binding => `'${binding.object}' in ctx`)
-				.join(' && ');
-
-			if (this.name === 'select' || group.bindings.find(binding => binding.name === 'indeterminate' || binding.isReadOnlyMediaAttribute)) {
-				this.component.target.hasComplexBindings = true;
-
-				block.builders.hydrate.addLine(
-					`if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});`
-				);
-			}
-
-			if (group.events[0] === 'resize') {
-				this.component.target.hasComplexBindings = true;
-
-				block.builders.hydrate.addLine(
-					`#component.root._beforecreate.push(${handler});`
-				);
-			}
-		});
-
-		this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
-	}
-
-	addAttributes(block: Block) {
-		if (this.attributes.find(attr => attr.type === 'Spread')) {
-			this.addSpreadAttributes(block);
-			return;
-		}
-
-		this.attributes.forEach((attribute: Attribute) => {
-			if (attribute.name === 'class' && attribute.isDynamic) {
-				this.classDependencies.push(...attribute.dependencies);
-			}
-			attribute.render(block);
-		});
-	}
-
-	addSpreadAttributes(block: Block) {
-		const levels = block.getUniqueName(`${this.var}_levels`);
-		const data = block.getUniqueName(`${this.var}_data`);
-
-		const initialProps = [];
-		const updates = [];
-
-		this.attributes
-			.filter(attr => attr.type === 'Attribute' || attr.type === 'Spread')
-			.forEach(attr => {
-				const condition = attr.dependencies.size > 0
-					? `(${[...attr.dependencies].map(d => `changed.${d}`).join(' || ')})`
-					: null;
-
-				if (attr.isSpread) {
-					const { snippet, dependencies } = attr.expression;
-
-					initialProps.push(snippet);
-
-					updates.push(condition ? `${condition} && ${snippet}` : snippet);
-				} else {
-					const snippet = `{ ${quoteNameIfNecessary(attr.name)}: ${attr.getValue()} }`;
-					initialProps.push(snippet);
-
-					updates.push(condition ? `${condition} && ${snippet}` : snippet);
-				}
-			});
-
-		block.builders.init.addBlock(deindent`
-			var ${levels} = [
-				${initialProps.join(',\n')}
-			];
-
-			var ${data} = {};
-			for (var #i = 0; #i < ${levels}.length; #i += 1) {
-				${data} = @assign(${data}, ${levels}[#i]);
-			}
-		`);
-
-		block.builders.hydrate.addLine(
-			`@setAttributes(${this.var}, ${data});`
-		);
-
-		block.builders.update.addBlock(deindent`
-			@setAttributes(${this.var}, @getSpreadUpdate(${levels}, [
-				${updates.join(',\n')}
-			]));
-		`);
-	}
-
-	addEventHandlers(block: Block) {
-		const { component } = this;
-
-		this.handlers.forEach(handler => {
-			const isCustomEvent = component.events.has(handler.name);
-
-			if (handler.callee) {
-				handler.render(this.component, block, handler.shouldHoist);
-			}
-
-			const target = handler.shouldHoist ? 'this' : this.var;
-
-			// get a name for the event handler that is globally unique
-			// if hoisted, locally unique otherwise
-			const handlerName = (handler.shouldHoist ? component : block).getUniqueName(
-				`${handler.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
-			);
-
-			const component_name = block.alias('component'); // can't use #component, might be hoisted
-
-			// create the handler body
-			const handlerBody = deindent`
-				${handler.shouldHoist && (
-					handler.usesComponent || handler.usesContext
-						? `const { ${[handler.usesComponent && 'component', handler.usesContext && 'ctx'].filter(Boolean).join(', ')} } = ${target}._svelte;`
-						: null
-				)}
-
-				${handler.snippet ?
-					handler.snippet :
-					`${component_name}.fire("${handler.name}", event);`}
-			`;
-
-			if (isCustomEvent) {
-				block.addVariable(handlerName);
-
-				block.builders.hydrate.addBlock(deindent`
-					${handlerName} = %events-${handler.name}.call(${component_name}, ${this.var}, function(event) {
-						${handlerBody}
-					});
-				`);
-
-				block.builders.destroy.addLine(deindent`
-					${handlerName}.destroy();
-				`);
-			} else {
-				const handlerFunction = deindent`
-					function ${handlerName}(event) {
-						${handlerBody}
-					}
-				`;
-
-				if (handler.shouldHoist) {
-					component.target.blocks.push(handlerFunction);
-				} else {
-					block.builders.init.addBlock(handlerFunction);
-				}
-
-				block.builders.hydrate.addLine(
-					`@addListener(${this.var}, "${handler.name}", ${handlerName});`
-				);
-
-				block.builders.destroy.addLine(
-					`@removeListener(${this.var}, "${handler.name}", ${handlerName});`
-				);
-			}
-		});
-	}
-
-	addRef(block: Block) {
-		const ref = `#component.refs.${this.ref.name}`;
-
-		block.builders.mount.addLine(
-			`${ref} = ${this.var};`
-		);
-
-		block.builders.destroy.addLine(
-			`if (${ref} === ${this.var}) ${ref} = null;`
-		);
-	}
-
-	addTransitions(
-		block: Block
-	) {
-		const { intro, outro } = this;
-
-		if (!intro && !outro) return;
-
-		if (intro === outro) {
-			const name = block.getUniqueName(`${this.var}_transition`);
-			const snippet = intro.expression
-				? intro.expression.snippet
-				: '{}';
-
-			block.addVariable(name);
-
-			const fn = `%transitions-${intro.name}`;
-
-			block.builders.intro.addConditional(`#component.root._intro`, deindent`
-				if (${name}) ${name}.invalidate();
-
-				#component.root._aftercreate.push(() => {
-					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
-					${name}.run(1);
-				});
-			`);
-
-			block.builders.outro.addBlock(deindent`
-				if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
-				${name}.run(0, () => {
-					#outrocallback();
-					${name} = null;
-				});
-			`);
-
-			block.builders.destroy.addConditional('detach', `if (${name}) ${name}.abort();`);
-		} else {
-			const introName = intro && block.getUniqueName(`${this.var}_intro`);
-			const outroName = outro && block.getUniqueName(`${this.var}_outro`);
-
-			if (intro) {
-				block.addVariable(introName);
-				const snippet = intro.expression
-					? intro.expression.snippet
-					: '{}';
-
-				const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
-
-				if (outro) {
-					block.builders.intro.addBlock(deindent`
-						if (${introName}) ${introName}.abort(1);
-						if (${outroName}) ${outroName}.abort(1);
-					`);
-				}
-
-				block.builders.intro.addConditional(`#component.root._intro`, deindent`
-					#component.root._aftercreate.push(() => {
-						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
-						${introName}.run(1);
-					});
-				`);
-			}
-
-			if (outro) {
-				block.addVariable(outroName);
-				const snippet = outro.expression
-					? outro.expression.snippet
-					: '{}';
-
-				const fn = `%transitions-${outro.name}`;
-
-				block.builders.intro.addBlock(deindent`
-					if (${outroName}) ${outroName}.abort(1);
-				`);
-
-				// TODO hide elements that have outro'd (unless they belong to a still-outroing
-				// group) prior to their removal from the DOM
-				block.builders.outro.addBlock(deindent`
-					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
-					${outroName}.run(0, #outrocallback);
-				`);
-
-				block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.abort();`);
-			}
-		}
-	}
-
-	addAnimation(block: Block) {
-		if (!this.animation) return;
-
-		const rect = block.getUniqueName('rect');
-		const animation = block.getUniqueName('animation');
-
-		block.addVariable(rect);
-		block.addVariable(animation);
-
-		block.builders.measure.addBlock(deindent`
-			${rect} = ${this.var}.getBoundingClientRect();
-		`);
-
-		block.builders.fix.addBlock(deindent`
-			@fixPosition(${this.var});
-			if (${animation}) ${animation}.stop();
-		`);
-
-		const params = this.animation.expression ? this.animation.expression.snippet : '{}';
-		block.builders.animate.addBlock(deindent`
-			if (${animation}) ${animation}.stop();
-			${animation} = @wrapAnimation(${this.var}, ${rect}, %animations-${this.animation.name}, ${params});
-		`);
-	}
-
-	addActions(block: Block) {
-		this.actions.forEach(action => {
-			const { expression } = action;
-			let snippet, dependencies;
-			if (expression) {
-				snippet = expression.snippet;
-				dependencies = expression.dependencies;
-			}
-
-			const name = block.getUniqueName(
-				`${action.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`
-			);
-
-			block.addVariable(name);
-			const fn = `%actions-${action.name}`;
-
-			block.builders.mount.addLine(
-				`${name} = ${fn}.call(#component, ${this.var}${snippet ? `, ${snippet}` : ''}) || {};`
-			);
-
-			if (dependencies && dependencies.size > 0) {
-				let conditional = `typeof ${name}.update === 'function' && `;
-				const deps = [...dependencies].map(dependency => `changed.${dependency}`).join(' || ');
-				conditional += dependencies.size > 1 ? `(${deps})` : deps;
-
-				block.builders.update.addConditional(
-					conditional,
-					`${name}.update.call(#component, ${snippet});`
-				);
-			}
-
-			block.builders.destroy.addLine(
-				`if (typeof ${name}.destroy === 'function') ${name}.destroy.call(#component);`
-			);
-		});
-	}
-
-	addClasses(block: Block) {
-		this.classes.forEach(classDir => {
-			const { expression, name } = classDir;
-			let snippet, dependencies;
-			if (expression) {
-				snippet = expression.snippet;
-				dependencies = expression.dependencies;
-			} else {
-				snippet = `ctx${quotePropIfNecessary(name)}`;
-				dependencies = [name];
-			}
-			const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`;
-
-			block.builders.hydrate.addLine(updater);
-
-			if ((dependencies && dependencies.size > 0) || this.classDependencies.length) {
-				const allDeps = this.classDependencies.concat(...dependencies);
-				const deps = allDeps.map(dependency => `changed${quotePropIfNecessary(dependency)}`).join(' || ');
-				const condition = allDeps.length > 1 ? `(${deps})` : deps;
-
-				block.builders.update.addConditional(
-					condition,
-					updater
-				);
-			}
-		});
-	}
-
 	getStaticAttributeValue(name: string) {
 		const attribute = this.attributes.find(
 			(attr: Attribute) => attr.type === 'Attribute' && attr.name.toLowerCase() === name
@@ -1416,32 +683,6 @@ function getRenderStatement(
 	return `@createElement("${name}")`;
 }
 
-function getClaimStatement(
-	component: Component,
-	namespace: string,
-	nodes: string,
-	node: Node
-) {
-	const attributes = node.attributes
-		.filter((attr: Node) => attr.type === 'Attribute')
-		.map((attr: Node) => `${quoteNameIfNecessary(attr.name)}: true`)
-		.join(', ');
-
-	const name = namespace ? node.name : node.name.toUpperCase();
-
-	return `@claimElement(${nodes}, "${name}", ${attributes
-		? `{ ${attributes} }`
-		: `{}`}, ${namespace === namespaces.svg ? true : false})`;
-}
-
-function stringifyAttributeValue(value: Node[] | true) {
-	if (value === true) return '';
-	if (value.length === 0) return `=""`;
-
-	const data = value[0].data;
-	return `=${JSON.stringify(data)}`;
-}
-
 const events = [
 	{
 		eventNames: ['input'],
diff --git a/src/compile/nodes/Window.ts b/src/compile/nodes/Window.ts
index fd5bd860a9..3f6bcaf36a 100644
--- a/src/compile/nodes/Window.ts
+++ b/src/compile/nodes/Window.ts
@@ -7,29 +7,6 @@ import flattenReference from '../../utils/flattenReference';
 import fuzzymatch from '../validate/utils/fuzzymatch';
 import list from '../../utils/list';
 
-const associatedEvents = {
-	innerWidth: 'resize',
-	innerHeight: 'resize',
-	outerWidth: 'resize',
-	outerHeight: 'resize',
-
-	scrollX: 'scroll',
-	scrollY: 'scroll',
-};
-
-const properties = {
-	scrollX: 'pageXOffset',
-	scrollY: 'pageYOffset'
-};
-
-const readonly = new Set([
-	'innerWidth',
-	'innerHeight',
-	'outerWidth',
-	'outerHeight',
-	'online',
-]);
-
 const validBindings = [
 	'innerWidth',
 	'innerHeight',
@@ -96,171 +73,4 @@ export default class Window extends Node {
 			}
 		});
 	}
-
-	build(
-		block: Block,
-		parentNode: string,
-		parentNodes: string
-	) {
-		const { component } = this;
-
-		const events = {};
-		const bindings: Record<string, string> = {};
-
-		this.handlers.forEach(handler => {
-			// TODO verify that it's a valid callee (i.e. built-in or declared method)
-			component.addSourcemapLocations(handler.expression);
-
-			const isCustomEvent = component.events.has(handler.name);
-
-			let usesState = handler.dependencies.size > 0;
-
-			handler.render(component, block, false); // TODO hoist?
-
-			const handlerName = block.getUniqueName(`onwindow${handler.name}`);
-			const handlerBody = deindent`
-				${usesState && `var ctx = #component.get();`}
-				${handler.snippet};
-			`;
-
-			if (isCustomEvent) {
-				// TODO dry this out
-				block.addVariable(handlerName);
-
-				block.builders.hydrate.addBlock(deindent`
-					${handlerName} = %events-${handler.name}.call(#component, window, function(event) {
-						${handlerBody}
-					});
-				`);
-
-				block.builders.destroy.addLine(deindent`
-					${handlerName}.destroy();
-				`);
-			} else {
-				block.builders.init.addBlock(deindent`
-					function ${handlerName}(event) {
-						${handlerBody}
-					}
-					window.addEventListener("${handler.name}", ${handlerName});
-				`);
-
-				block.builders.destroy.addBlock(deindent`
-					window.removeEventListener("${handler.name}", ${handlerName});
-				`);
-			}
-		});
-
-		this.bindings.forEach(binding => {
-			// in dev mode, throw if read-only values are written to
-			if (readonly.has(binding.name)) {
-				component.target.readonly.add(binding.value.node.name);
-			}
-
-			bindings[binding.name] = binding.value.node.name;
-
-			// bind:online is a special case, we need to listen for two separate events
-			if (binding.name === 'online') return;
-
-			const associatedEvent = associatedEvents[binding.name];
-			const property = properties[binding.name] || binding.name;
-
-			if (!events[associatedEvent]) events[associatedEvent] = [];
-			events[associatedEvent].push(
-				`${binding.value.node.name}: this.${property}`
-			);
-
-			// add initial value
-			component.target.metaBindings.push(
-				`this._state.${binding.value.node.name} = window.${property};`
-			);
-		});
-
-		const lock = block.getUniqueName(`window_updating`);
-		const clear = block.getUniqueName(`clear_window_updating`);
-		const timeout = block.getUniqueName(`window_updating_timeout`);
-
-		Object.keys(events).forEach(event => {
-			const handlerName = block.getUniqueName(`onwindow${event}`);
-			const props = events[event].join(',\n');
-
-			if (event === 'scroll') {
-				// TODO other bidirectional bindings...
-				block.addVariable(lock, 'false');
-				block.addVariable(clear, `function() { ${lock} = false; }`);
-				block.addVariable(timeout);
-			}
-
-			const handlerBody = deindent`
-				${event === 'scroll' && deindent`
-					if (${lock}) return;
-					${lock} = true;
-				`}
-				${component.options.dev && `component._updatingReadonlyProperty = true;`}
-
-				#component.set({
-					${props}
-				});
-
-				${component.options.dev && `component._updatingReadonlyProperty = false;`}
-				${event === 'scroll' && `${lock} = false;`}
-			`;
-
-			block.builders.init.addBlock(deindent`
-				function ${handlerName}(event) {
-					${handlerBody}
-				}
-				window.addEventListener("${event}", ${handlerName});
-			`);
-
-			block.builders.destroy.addBlock(deindent`
-				window.removeEventListener("${event}", ${handlerName});
-			`);
-		});
-
-		// special case... might need to abstract this out if we add more special cases
-		if (bindings.scrollX || bindings.scrollY) {
-			block.builders.init.addBlock(deindent`
-				#component.on("state", ({ changed, current }) => {
-					if (${
-						[bindings.scrollX, bindings.scrollY].map(
-							binding => binding && `changed["${binding}"]`
-						).filter(Boolean).join(' || ')
-					}) {
-						${lock} = true;
-						clearTimeout(${timeout});
-						window.scrollTo(${
-							bindings.scrollX ? `current["${bindings.scrollX}"]` : `window.pageXOffset`
-						}, ${
-							bindings.scrollY ? `current["${bindings.scrollY}"]` : `window.pageYOffset`
-						});
-						${timeout} = setTimeout(${clear}, 100);
-					}
-				});
-			`);
-		}
-
-		// another special case. (I'm starting to think these are all special cases.)
-		if (bindings.online) {
-			const handlerName = block.getUniqueName(`onlinestatuschanged`);
-			block.builders.init.addBlock(deindent`
-				function ${handlerName}(event) {
-					${component.options.dev && `component._updatingReadonlyProperty = true;`}
-					#component.set({ ${bindings.online}: navigator.onLine });
-					${component.options.dev && `component._updatingReadonlyProperty = false;`}
-				}
-				window.addEventListener("online", ${handlerName});
-				window.addEventListener("offline", ${handlerName});
-			`);
-
-			// add initial value
-			component.target.metaBindings.push(
-				`this._state.${bindings.online} = navigator.onLine;`
-			);
-
-			block.builders.destroy.addBlock(deindent`
-				window.removeEventListener("online", ${handlerName});
-				window.removeEventListener("offline", ${handlerName});
-			`);
-		}
-	}
 }
diff --git a/src/compile/nodes/shared/Node.ts b/src/compile/nodes/shared/Node.ts
index 99d8f39b76..cc544c9439 100644
--- a/src/compile/nodes/shared/Node.ts
+++ b/src/compile/nodes/shared/Node.ts
@@ -127,10 +127,6 @@ export default class Node {
 		// implemented by subclasses
 	}
 
-	isDomNode() {
-		return this.type === 'Element' || this.type === 'Text' || this.type === 'MustacheTag';
-	}
-
 	hasAncestor(type: string) {
 		return this.parent ?
 			this.parent.type === type || this.parent.hasAncestor(type) :
@@ -162,10 +158,6 @@ export default class Node {
 		return anchor;
 	}
 
-	getUpdateMountNode(anchor: string) {
-		return this.parent.isDomNode() ? this.parent.var : `${anchor}.parentNode`;
-	}
-
 	remount(name: string) {
 		return `${this.var}.m(${name}._slotted.default, null);`;
 	}
diff --git a/src/compile/nodes/shared/Tag.ts b/src/compile/nodes/shared/Tag.ts
index f244aa08fe..64886bf134 100644
--- a/src/compile/nodes/shared/Tag.ts
+++ b/src/compile/nodes/shared/Tag.ts
@@ -1,6 +1,5 @@
 import Node from './Node';
 import Expression from './Expression';
-import Block from '../../render-dom/Block';
 
 export default class Tag extends Node {
 	expression: Expression;
@@ -15,42 +14,4 @@ export default class Tag extends Node {
 			(this.expression.dependencies.size && scope.names.has(info.expression.name))
 		);
 	}
-
-	init(block: Block) {
-		this.cannotUseInnerHTML();
-		this.var = block.getUniqueName(this.type === 'MustacheTag' ? 'text' : 'raw');
-		block.addDependencies(this.expression.dependencies);
-	}
-
-	renameThisMethod(
-		block: Block,
-		update: ((value: string) => string)
-	) {
-		const { snippet, dependencies } = this.expression;
-
-		const value = this.shouldCache && block.getUniqueName(`${this.var}_value`);
-		const content = this.shouldCache ? value : snippet;
-
-		if (this.shouldCache) block.addVariable(value, snippet);
-
-		if (dependencies.size) {
-			const changedCheck = (
-				(block.hasOutros ? `!#current || ` : '') +
-				[...dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')
-			);
-
-			const updateCachedValue = `${value} !== (${value} = ${snippet})`;
-
-			const condition = this.shouldCache ?
-				(dependencies.size ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
-				changedCheck;
-
-			block.builders.update.addConditional(
-				condition,
-				update(content)
-			);
-		}
-
-		return { init: content };
-	}
 }
\ No newline at end of file
diff --git a/src/compile/render-dom/Block.ts b/src/compile/render-dom/Block.ts
index 3de06ec759..35d3f87a25 100644
--- a/src/compile/render-dom/Block.ts
+++ b/src/compile/render-dom/Block.ts
@@ -19,6 +19,8 @@ export default class Block {
 	name: string;
 	comment?: string;
 
+	wrappers: Wrapper[];
+
 	key: string;
 	first: string;
 
@@ -62,6 +64,8 @@ export default class Block {
 		this.name = options.name;
 		this.comment = options.comment;
 
+		this.wrappers = [];
+
 		// for keyed each blocks
 		this.key = options.key;
 		this.first = null;
@@ -101,6 +105,31 @@ export default class Block {
 		this.hasUpdateMethod = false; // determined later
 	}
 
+	assignVariableNames() {
+		const seen = new Set();
+		const dupes = new Set();
+
+		this.wrappers.forEach(wrapper => {
+			if (seen.has(wrapper.var)) {
+				dupes.add(wrapper.var);
+			}
+
+			seen.add(wrapper.var);
+		});
+
+		const counts = new Map();
+
+		this.wrappers.forEach(wrapper => {
+			if (dupes.has(wrapper.var)) {
+				const i = counts.get(wrapper.var);
+				wrapper.var = this.getUniqueName(wrapper.var + i);
+				counts.set(wrapper.var, i + 1);
+			} else {
+				wrapper.var = this.getUniqueName(wrapper.var);
+			}
+		});
+	}
+
 	addDependencies(dependencies: Set<string>) {
 		dependencies.forEach(dependency => {
 			this.dependencies.add(dependency);
diff --git a/src/compile/render-dom/Renderer.ts b/src/compile/render-dom/Renderer.ts
new file mode 100644
index 0000000000..da1c31302e
--- /dev/null
+++ b/src/compile/render-dom/Renderer.ts
@@ -0,0 +1,69 @@
+import Block from './Block';
+import { CompileOptions } from '../../interfaces';
+import Component from '../Component';
+import FragmentWrapper from './wrappers/Fragment';
+
+export default class Renderer {
+	component: Component; // TODO Maybe Renderer shouldn't know about Component?
+	options: CompileOptions;
+
+	blocks: (Block | string)[];
+	readonly: Set<string>;
+	slots: Set<string>;
+	metaBindings: string[];
+
+	block: Block;
+	fragment: FragmentWrapper;
+
+	usedNames: Set<string>;
+	fileVar: string;
+
+	hasIntroTransitions: boolean;
+	hasOutroTransitions: boolean;
+	hasComplexBindings: boolean;
+
+	constructor(component: Component, options: CompileOptions) {
+		this.component = component;
+		this.options = options;
+
+		this.readonly = new Set();
+		this.slots = new Set();
+
+		this.usedNames = new Set();
+		this.fileVar = options.dev && this.component.getUniqueName('file');
+
+		// initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
+		this.metaBindings = [];
+
+		// main block
+		this.block = new Block({
+			component,
+			name: '@create_main_fragment',
+			key: null,
+
+			bindings: new Map(),
+
+			dependencies: new Set(),
+		});
+
+		this.block.hasUpdateMethod = true;
+		this.blocks = [this.block];
+
+		this.fragment = new FragmentWrapper(
+			this,
+			this.block,
+			component.fragment.children,
+			null,
+			true,
+			null
+		);
+
+		this.blocks.forEach(block => {
+			if (typeof block !== 'string') {
+				block.assignVariableNames();
+			}
+		});
+
+		this.fragment.render(this.block, null, 'nodes');
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts
index 11b30e8313..31226f4561 100644
--- a/src/compile/render-dom/index.ts
+++ b/src/compile/render-dom/index.ts
@@ -3,27 +3,9 @@ import { stringify, escape } from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
 import globalWhitelist from '../../utils/globalWhitelist';
 import Component from '../Component';
-import Block from './Block';
+import Renderer from './Renderer';
 import { CompileOptions } from '../../interfaces';
 
-export class DomTarget {
-	blocks: (Block|string)[];
-	readonly: Set<string>;
-	metaBindings: string[];
-
-	hasIntroTransitions: boolean;
-	hasOutroTransitions: boolean;
-	hasComplexBindings: boolean;
-
-	constructor() {
-		this.blocks = [];
-		this.readonly = new Set();
-
-		// initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
-		this.metaBindings = [];
-	}
-}
-
 export default function dom(
 	component: Component,
 	options: CompileOptions
@@ -36,8 +18,9 @@ export default function dom(
 		templateProperties
 	} = component;
 
-	component.fragment.build();
-	const { block } = component.fragment;
+	const renderer = new Renderer(component, options);
+
+	const { block } = renderer;
 
 	if (component.options.nestedTransitions) {
 		block.hasOutroMethod = true;
@@ -52,14 +35,14 @@ export default function dom(
 
 	if (computations.length) {
 		computations.forEach(({ key, deps, hasRestParam }) => {
-			if (component.target.readonly.has(key)) {
+			if (renderer.readonly.has(key)) {
 				// <svelte:window> bindings
 				throw new Error(
 					`Cannot have a computed value '${key}' that clashes with a read-only property`
 				);
 			}
 
-			component.target.readonly.add(key);
+			renderer.readonly.add(key);
 
 			if (deps) {
 				deps.forEach(dep => {
@@ -96,7 +79,7 @@ export default function dom(
 	}
 
 	if (component.options.dev) {
-		builder.addLine(`const ${component.fileVar} = ${JSON.stringify(component.file)};`);
+		builder.addLine(`const ${renderer.fileVar} = ${JSON.stringify(component.file)};`);
 	}
 
 	const css = component.stylesheet.render(options.filename, !component.customElement);
@@ -115,7 +98,7 @@ export default function dom(
 		`);
 	}
 
-	component.target.blocks.forEach(block => {
+	renderer.blocks.forEach(block => {
 		builder.addBlock(block.toString());
 	});
 
@@ -167,7 +150,7 @@ export default function dom(
 		${component.refs.size > 0 && `this.refs = {};`}
 		this._state = ${initialState.reduce((state, piece) => `@assign(${state}, ${piece})`)};
 		${storeProps.length > 0 && `this.store._add(this, [${storeProps.map(prop => `"${prop.slice(1)}"`)}]);`}
-		${component.target.metaBindings}
+		${renderer.metaBindings}
 		${computations.length && `this._recompute({ ${Array.from(computationDeps).map(dep => `${dep}: 1`).join(', ')} }, this._state);`}
 		${options.dev &&
 			Array.from(component.expectedProperties).map(prop => {
@@ -236,7 +219,7 @@ export default function dom(
 				this._fragment.c();`}
 				this._mount(options.target, options.anchor);
 
-				${(component.hasComponents || component.target.hasComplexBindings || hasInitHooks || component.target.hasIntroTransitions) &&
+				${(component.hasComponents || renderer.hasComplexBindings || hasInitHooks || renderer.hasIntroTransitions) &&
 				`@flush(this);`}
 			}
 		`}
@@ -279,7 +262,7 @@ export default function dom(
 					this.set({ [attr]: newValue });
 				}
 
-				${(component.hasComponents || component.target.hasComplexBindings || templateProperties.oncreate || component.target.hasIntroTransitions) && deindent`
+				${(component.hasComponents || renderer.hasComplexBindings || templateProperties.oncreate || renderer.hasIntroTransitions) && deindent`
 					connectedCallback() {
 						@flush(this);
 					}
@@ -312,7 +295,7 @@ export default function dom(
 	builder.addBlock(deindent`
 		${options.dev && deindent`
 			${name}.prototype._checkReadOnly = function _checkReadOnly(newState) {
-				${Array.from(component.target.readonly).map(
+				${Array.from(renderer.readonly).map(
 					prop =>
 						`if ('${prop}' in newState && !this._updatingReadonlyProperty) throw new Error("${debugName}: Cannot set read-only property '${prop}'");`
 				)}
diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts
new file mode 100644
index 0000000000..0483afd687
--- /dev/null
+++ b/src/compile/render-dom/wrappers/EachBlock.ts
@@ -0,0 +1,461 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Node from '../../nodes/shared/Node';
+import Wrapper from './shared/wrapper';
+import createDebuggingComment from '../../../utils/createDebuggingComment';
+import EachBlock from '../../nodes/EachBlock';
+import FragmentWrapper from './Fragment';
+import deindent from '../../../utils/deindent';
+
+export default class EachBlockWrapper extends Wrapper {
+	block: Block;
+	node: EachBlock;
+	fragment: FragmentWrapper;
+	var: string;
+	vars: {
+		anchor: string;
+		create_each_block: string;
+		each_block_value: string;
+		get_each_context: string;
+		iterations: string;
+		length: string;
+		mountOrIntro: string;
+	}
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: EachBlock,
+		stripWhitespace: boolean,
+		nextSibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.cannotUseInnerHTML();
+
+		this.var = 'each';
+
+		const { dependencies } = node.expression;
+		block.addDependencies(dependencies);
+
+		this.block = block.child({
+			comment: createDebuggingComment(this.node, this.renderer.component),
+			name: renderer.component.getUniqueName('create_each_block'),
+			key: <string>node.key, // TODO...
+
+			bindings: new Map(block.bindings)
+		});
+
+		// TODO this seems messy
+		this.block.hasAnimation = this.node.hasAnimation;
+
+		// node.contexts.forEach(prop => {
+		// 	this.block.bindings.set(prop.key.name, `ctx.${this.vars.each_block_value}[ctx.${indexName}]${prop.tail}`);
+		// });
+
+		if (this.node.index) {
+			this.block.getUniqueName(this.node.index); // this prevents name collisions (#1254)
+		}
+
+		renderer.blocks.push(this.block);
+
+		this.fragment = new FragmentWrapper(renderer, block, node.children, this, stripWhitespace, nextSibling);
+		block.addDependencies(this.block.dependencies);
+		this.block.hasUpdateMethod = this.block.dependencies.size > 0; // TODO should this logic be in Block?
+
+		if (this.else) {
+			this.else.block = block.child({
+				comment: createDebuggingComment(this.else, this.renderer.component),
+				name: renderer.component.getUniqueName(`${this.block.name}_else`),
+			});
+
+			renderer.blocks.push(this.else.block);
+			this.else.initChildren(
+				this.else.block,
+				stripWhitespace,
+				nextSibling
+			);
+			this.else.block.hasUpdateMethod = this.else.block.dependencies.size > 0;
+		}
+
+		if (this.block.hasOutros || (this.else && this.else.block.hasOutros)) {
+			block.addOutro();
+		}
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		if (this.fragment.nodes.length === 0) return;
+
+		const { renderer } = this;
+		const { component } = renderer;
+
+		// hack the sourcemap, so that if data is missing the bug
+		// is easy to find
+		let c = this.node.start + 2;
+		while (component.source[c] !== 'e') c += 1;
+		component.code.overwrite(c, c + 4, 'length');
+		const length = `[✂${c}-${c+4}✂]`;
+
+		const needsAnchor = this.next
+			? !this.next.isDomNode() :
+			!parentNode || !this.parent.isDomNode();
+
+		this.vars = {
+			anchor: needsAnchor
+				? block.getUniqueName(`${this.var}_anchor`)
+				: (this.next && this.next.var) || 'null',
+			create_each_block: this.block.name,
+			each_block_value: renderer.component.getUniqueName('each_value'),
+			get_each_context: renderer.component.getUniqueName(`get_${this.var}_context`),
+			iterations: block.getUniqueName(`${this.var}_blocks`),
+			length: `[✂${c}-${c+4}✂]`,
+			mountOrIntro: (this.block.hasIntroMethod || this.block.hasOutroMethod)
+				? 'i'
+				: 'm'
+		};
+
+		this.contextProps = this.node.contexts.map(prop => `child_ctx.${prop.key.name} = list[i]${prop.tail};`);
+
+		const indexName = this.node.index || renderer.component.getUniqueName(`${this.node.context}_index`);
+
+		// TODO only add these if necessary
+		this.contextProps.push(
+			`child_ctx.${this.vars.each_block_value} = list;`,
+			`child_ctx.${indexName} = i;`
+		);
+
+		const { snippet } = this.node.expression;
+
+		block.builders.init.addLine(`var ${this.vars.each_block_value} = ${snippet};`);
+
+		renderer.blocks.push(deindent`
+			function ${this.vars.get_each_context}(ctx, list, i) {
+				const child_ctx = Object.create(ctx);
+				${this.contextProps}
+				return child_ctx;
+			}
+		`);
+
+		if (this.node.key) {
+			this.renderKeyed(block, parentNode, parentNodes, snippet);
+		} else {
+			this.renderUnkeyed(block, parentNode, parentNodes, snippet);
+		}
+
+		if (needsAnchor) {
+			block.addElement(
+				this.vars.anchor,
+				`@createComment()`,
+				parentNodes && `@createComment()`,
+				parentNode
+			);
+		}
+
+		if (this.else) {
+			const each_block_else = component.getUniqueName(`${this.var}_else`);
+			const mountOrIntro = (this.else.block.hasIntroMethod || this.else.block.hasOutroMethod) ? 'i' : 'm';
+
+			block.builders.init.addLine(`var ${each_block_else} = null;`);
+
+			// TODO neaten this up... will end up with an empty line in the block
+			block.builders.init.addBlock(deindent`
+				if (!${this.vars.each_block_value}.${length}) {
+					${each_block_else} = ${this.else.block.name}(#component, ctx);
+					${each_block_else}.c();
+				}
+			`);
+
+			block.builders.mount.addBlock(deindent`
+				if (${each_block_else}) {
+					${each_block_else}.${mountOrIntro}(${parentNode || '#target'}, null);
+				}
+			`);
+
+			const initialMountNode = parentNode || `${anchor}.parentNode`;
+
+			if (this.else.block.hasUpdateMethod) {
+				block.builders.update.addBlock(deindent`
+					if (!${this.vars.each_block_value}.${length} && ${each_block_else}) {
+						${each_block_else}.p(changed, ctx);
+					} else if (!${this.vars.each_block_value}.${length}) {
+						${each_block_else} = ${this.else.block.name}(#component, ctx);
+						${each_block_else}.c();
+						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${this.vars.anchor});
+					} else if (${each_block_else}) {
+						${each_block_else}.d(1);
+						${each_block_else} = null;
+					}
+				`);
+			} else {
+				block.builders.update.addBlock(deindent`
+					if (${this.vars.each_block_value}.${length}) {
+						if (${each_block_else}) {
+							${each_block_else}.d(1);
+							${each_block_else} = null;
+						}
+					} else if (!${each_block_else}) {
+						${each_block_else} = ${this.else.block.name}(#component, ctx);
+						${each_block_else}.c();
+						${each_block_else}.${mountOrIntro}(${initialMountNode}, ${anchor});
+					}
+				`);
+			}
+
+			block.builders.destroy.addBlock(deindent`
+				if (${each_block_else}) ${each_block_else}.d(${parentNode ? '' : 'detach'});
+			`);
+		}
+
+		this.fragment.nodes.forEach((child: Wrapper) => {
+			child.render(this.block, null, 'nodes');
+		});
+
+		if (this.else) {
+			this.else.children.forEach((child: Node) => {
+				child.build(this.else.block, null, 'nodes');
+			});
+		}
+	}
+
+	renderKeyed(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		snippet: string
+	) {
+		const {
+			create_each_block,
+			length,
+			anchor,
+			mountOrIntro,
+		} = this.vars;
+
+		const get_key = block.getUniqueName('get_key');
+		const blocks = block.getUniqueName(`${this.var}_blocks`);
+		const lookup = block.getUniqueName(`${this.var}_lookup`);
+
+		block.addVariable(blocks, '[]');
+		block.addVariable(lookup, `@blankObject()`);
+
+		if (this.fragment.nodes[0].isDomNode()) {
+			this.block.first = this.fragment.nodes[0].var;
+		} else {
+			this.block.first = this.block.getUniqueName('first');
+			this.block.addElement(
+				this.block.first,
+				`@createComment()`,
+				parentNodes && `@createComment()`,
+				null
+			);
+		}
+
+		block.builders.init.addBlock(deindent`
+			const ${get_key} = ctx => ${this.node.key.snippet};
+
+			for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
+				let child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i);
+				let key = ${get_key}(child_ctx);
+				${blocks}[#i] = ${lookup}[key] = ${create_each_block}(#component, key, child_ctx);
+			}
+		`);
+
+		const initialMountNode = parentNode || '#target';
+		const updateMountNode = this.getUpdateMountNode(anchor);
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.create.addBlock(deindent`
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].c();
+		`);
+
+		if (parentNodes) {
+			block.builders.claim.addBlock(deindent`
+				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].l(${parentNodes});
+			`);
+		}
+
+		block.builders.mount.addBlock(deindent`
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
+		`);
+
+		const dynamic = this.block.hasUpdateMethod;
+
+		const rects = block.getUniqueName('rects');
+		const destroy = this.node.hasAnimation
+			? `@fixAndOutroAndDestroyBlock`
+			: this.block.hasOutros
+				? `@outroAndDestroyBlock`
+				: `@destroyBlock`;
+
+		block.builders.update.addBlock(deindent`
+			const ${this.vars.each_block_value} = ${snippet};
+
+			${this.block.hasOutros && `@groupOutros();`}
+			${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].r();`}
+			${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${updateMountNode}, ${destroy}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.vars.get_each_context});
+			${this.node.hasAnimation && `for (let #i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].a();`}
+		`);
+
+		if (this.block.hasOutros && this.renderer.component.options.nestedTransitions) {
+			const countdown = block.getUniqueName('countdown');
+			block.builders.outro.addBlock(deindent`
+				const ${countdown} = @callAfter(#outrocallback, ${blocks}.length);
+				for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].o(${countdown});
+			`);
+		}
+
+		block.builders.destroy.addBlock(deindent`
+			for (#i = 0; #i < ${blocks}.length; #i += 1) ${blocks}[#i].d(${parentNode ? '' : 'detach'});
+		`);
+	}
+
+	renderUnkeyed(
+		block: Block,
+		parentNode: string,
+		parentNodes: string,
+		snippet: string
+	) {
+		const {
+			create_each_block,
+			length,
+			iterations,
+			anchor,
+			mountOrIntro,
+		} = this.vars;
+
+		block.builders.init.addBlock(deindent`
+			var ${iterations} = [];
+
+			for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
+				${iterations}[#i] = ${create_each_block}(#component, ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i));
+			}
+		`);
+
+		const initialMountNode = parentNode || '#target';
+		const updateMountNode = this.getUpdateMountNode(anchor);
+		const anchorNode = parentNode ? 'null' : 'anchor';
+
+		block.builders.create.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].c();
+			}
+		`);
+
+		if (parentNodes) {
+			block.builders.claim.addBlock(deindent`
+				for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+					${iterations}[#i].l(${parentNodes});
+				}
+			`);
+		}
+
+		block.builders.mount.addBlock(deindent`
+			for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+				${iterations}[#i].${mountOrIntro}(${initialMountNode}, ${anchorNode});
+			}
+		`);
+
+		const allDependencies = new Set(this.block.dependencies);
+		const { dependencies } = this.node.expression;
+		dependencies.forEach((dependency: string) => {
+			allDependencies.add(dependency);
+		});
+
+		const outroBlock = this.block.hasOutros && block.getUniqueName('outroBlock')
+		if (outroBlock) {
+			block.builders.init.addBlock(deindent`
+				function ${outroBlock}(i, detach, fn) {
+					if (${iterations}[i]) {
+						${iterations}[i].o(() => {
+							if (detach) {
+								${iterations}[i].d(detach);
+								${iterations}[i] = null;
+							}
+							if (fn) fn();
+						});
+					}
+				}
+			`);
+		}
+
+		// TODO do this for keyed blocks as well
+		const condition = Array.from(allDependencies)
+			.map(dependency => `changed.${dependency}`)
+			.join(' || ');
+
+		if (condition !== '') {
+			const forLoopBody = this.block.hasUpdateMethod
+				? (this.block.hasIntros || this.block.hasOutros)
+					? deindent`
+						if (${iterations}[#i]) {
+							${iterations}[#i].p(changed, child_ctx);
+						} else {
+							${iterations}[#i] = ${create_each_block}(#component, child_ctx);
+							${iterations}[#i].c();
+						}
+						${iterations}[#i].i(${updateMountNode}, ${anchor});
+					`
+					: deindent`
+						if (${iterations}[#i]) {
+							${iterations}[#i].p(changed, child_ctx);
+						} else {
+							${iterations}[#i] = ${create_each_block}(#component, child_ctx);
+							${iterations}[#i].c();
+							${iterations}[#i].m(${updateMountNode}, ${anchor});
+						}
+					`
+				: deindent`
+					${iterations}[#i] = ${create_each_block}(#component, child_ctx);
+					${iterations}[#i].c();
+					${iterations}[#i].${mountOrIntro}(${updateMountNode}, ${anchor});
+				`;
+
+			const start = this.block.hasUpdateMethod ? '0' : `${iterations}.length`;
+
+			let destroy;
+
+			if (this.block.hasOutros) {
+				destroy = deindent`
+					@groupOutros();
+					for (; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 1);
+				`;
+			} else {
+				destroy = deindent`
+					for (; #i < ${iterations}.length; #i += 1) {
+						${iterations}[#i].d(1);
+					}
+					${iterations}.length = ${this.vars.each_block_value}.${length};
+				`;
+			}
+
+			block.builders.update.addBlock(deindent`
+				if (${condition}) {
+					${this.vars.each_block_value} = ${snippet};
+
+					for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
+						const child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i);
+
+						${forLoopBody}
+					}
+
+					${destroy}
+				}
+			`);
+		}
+
+		if (outroBlock && this.renderer.component.options.nestedTransitions) {
+			const countdown = block.getUniqueName('countdown');
+			block.builders.outro.addBlock(deindent`
+				${iterations} = ${iterations}.filter(Boolean);
+				const ${countdown} = @callAfter(#outrocallback, ${iterations}.length);
+				for (let #i = 0; #i < ${iterations}.length; #i += 1) ${outroBlock}(#i, 0, ${countdown});`
+			);
+		}
+
+		block.builders.destroy.addBlock(`@destroyEach(${iterations}, detach);`);
+	}
+
+	remount(name: string) {
+		// TODO consider keyed blocks
+		return `for (var #i = 0; #i < ${this.vars.iterations}.length; #i += 1) ${this.vars.iterations}[#i].m(${name}._slotted.default, null);`;
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Element/Attribute.ts b/src/compile/render-dom/wrappers/Element/Attribute.ts
new file mode 100644
index 0000000000..4f3b0eb144
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Element/Attribute.ts
@@ -0,0 +1,421 @@
+import Attribute from '../../../nodes/Attribute';
+import Block from '../../Block';
+import fixAttributeCasing from '../../../../utils/fixAttributeCasing';
+import ElementWrapper from '.';
+import { stringify } from '../../../../utils/stringify';
+
+export default class AttributeWrapper {
+	node: Attribute;
+
+	constructor(node: Attribute, parent: ElementWrapper) {
+		this.node = node;
+		this.parent = parent;
+	}
+
+	render(block: Block) {
+		const element = this.parent;
+		const name = fixAttributeCasing(this.node.name);
+
+		let metadata = element.namespace ? null : attributeLookup[name];
+		if (metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf(element.node.name))
+			metadata = null;
+
+		const isIndirectlyBoundValue =
+			name === 'value' &&
+			(element.name === 'option' || // TODO check it's actually bound
+				(element.name === 'input' &&
+					element.bindings.find(
+						(binding: Binding) =>
+							/checked|group/.test(binding.name)
+						)));
+
+		const propertyName = isIndirectlyBoundValue
+			? '__value'
+			: metadata && metadata.propertyName;
+
+		// xlink is a special case... we could maybe extend this to generic
+		// namespaced attributes but I'm not sure that's applicable in
+		// HTML5?
+		const method = /-/.test(element.name)
+			? '@setCustomElementData'
+			: name.slice(0, 6) === 'xlink:'
+				? '@setXlinkAttribute'
+				: '@setAttribute';
+
+		const isLegacyInputType = element.renderer.component.options.legacy && name === 'type' && this.parent.name === 'input';
+
+		const isDataSet = /^data-/.test(name) && !element.renderer.component.options.legacy && !element.namespace;
+		const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
+			return m[1].toUpperCase();
+		}) : name;
+
+		if (this.node.isDynamic) {
+			let value;
+
+			// TODO some of this code is repeated in Tag.ts — would be good to
+			// DRY it out if that's possible without introducing crazy indirection
+			if (this.node.chunks.length === 1) {
+				// single {tag} — may be a non-string
+				value = this.node.chunks[0].snippet;
+			} else {
+				// '{foo} {bar}' — treat as string concatenation
+				value =
+					(this.node.chunks[0].type === 'Text' ? '' : `"" + `) +
+					this.node.chunks
+						.map((chunk: Node) => {
+							if (chunk.type === 'Text') {
+								return stringify(chunk.data);
+							} else {
+								return chunk.getPrecedence() <= 13
+									? `(${chunk.snippet})`
+									: chunk.snippet;
+							}
+						})
+						.join(' + ');
+			}
+
+			const isSelectValueAttribute =
+				name === 'value' && element.name === 'select';
+
+			const shouldCache = this.shouldCache || isSelectValueAttribute;
+
+			const last = shouldCache && block.getUniqueName(
+				`${element.var}_${name.replace(/[^a-zA-Z_$]/g, '_')}_value`
+			);
+
+			if (shouldCache) block.addVariable(last);
+
+			let updater;
+			const init = shouldCache ? `${last} = ${value}` : value;
+
+			if (isLegacyInputType) {
+				block.builders.hydrate.addLine(
+					`@setInputType(${element.var}, ${init});`
+				);
+				updater = `@setInputType(${element.var}, ${shouldCache ? last : value});`;
+			} else if (isSelectValueAttribute) {
+				// annoying special case
+				const isMultipleSelect = element.getStaticAttributeValue('multiple');
+				const i = block.getUniqueName('i');
+				const option = block.getUniqueName('option');
+
+				const ifStatement = isMultipleSelect
+					? deindent`
+						${option}.selected = ~${last}.indexOf(${option}.__value);`
+					: deindent`
+						if (${option}.__value === ${last}) {
+							${option}.selected = true;
+							break;
+						}`;
+
+				updater = deindent`
+					for (var ${i} = 0; ${i} < ${element.var}.options.length; ${i} += 1) {
+						var ${option} = ${element.var}.options[${i}];
+
+						${ifStatement}
+					}
+				`;
+
+				block.builders.mount.addBlock(deindent`
+					${last} = ${value};
+					${updater}
+				`);
+			} else if (propertyName) {
+				block.builders.hydrate.addLine(
+					`${element.var}.${propertyName} = ${init};`
+				);
+				updater = `${element.var}.${propertyName} = ${shouldCache ? last : value};`;
+			} else if (isDataSet) {
+				block.builders.hydrate.addLine(
+					`${element.var}.dataset.${camelCaseName} = ${init};`
+				);
+				updater = `${element.var}.dataset.${camelCaseName} = ${shouldCache ? last : value};`;
+			} else {
+				block.builders.hydrate.addLine(
+					`${method}(${element.var}, "${name}", ${init});`
+				);
+				updater = `${method}(${element.var}, "${name}", ${shouldCache ? last : value});`;
+			}
+
+			if (this.node.dependencies.size || isSelectValueAttribute) {
+				const dependencies = Array.from(this.node.dependencies);
+				const changedCheck = (
+					(block.hasOutros ? `!#current || ` : '') +
+					dependencies.map(dependency => `changed.${dependency}`).join(' || ')
+				);
+
+				const updateCachedValue = `${last} !== (${last} = ${value})`;
+
+				const condition = shouldCache ?
+					( dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue ) :
+					changedCheck;
+
+				block.builders.update.addConditional(
+					condition,
+					updater
+				);
+			}
+		} else {
+			const value = this.node.getValue();
+
+			const statement = (
+				isLegacyInputType
+					? `@setInputType(${element.var}, ${value});`
+					: propertyName
+						? `${element.var}.${propertyName} = ${value};`
+						: isDataSet
+							? `${element.var}.dataset.${camelCaseName} = ${value};`
+							: `${method}(${element.var}, "${name}", ${value});`
+			);
+
+			block.builders.hydrate.addLine(statement);
+
+			// special case – autofocus. has to be handled in a bit of a weird way
+			if (this.node.isTrue && name === 'autofocus') {
+				block.autofocus = element.var;
+			}
+		}
+
+		if (isIndirectlyBoundValue) {
+			const updateValue = `${element.var}.value = ${element.var}.__value;`;
+
+			block.builders.hydrate.addLine(updateValue);
+			if (this.node.isDynamic) block.builders.update.addLine(updateValue);
+		}
+	}
+}
+
+// source: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+const attributeLookup = {
+	accept: { appliesTo: ['form', 'input'] },
+	'accept-charset': { propertyName: 'acceptCharset', appliesTo: ['form'] },
+	accesskey: { propertyName: 'accessKey' },
+	action: { appliesTo: ['form'] },
+	align: {
+		appliesTo: [
+			'applet',
+			'caption',
+			'col',
+			'colgroup',
+			'hr',
+			'iframe',
+			'img',
+			'table',
+			'tbody',
+			'td',
+			'tfoot',
+			'th',
+			'thead',
+			'tr',
+		],
+	},
+	allowfullscreen: { propertyName: 'allowFullscreen', appliesTo: ['iframe'] },
+	alt: { appliesTo: ['applet', 'area', 'img', 'input'] },
+	async: { appliesTo: ['script'] },
+	autocomplete: { appliesTo: ['form', 'input'] },
+	autofocus: { appliesTo: ['button', 'input', 'keygen', 'select', 'textarea'] },
+	autoplay: { appliesTo: ['audio', 'video'] },
+	autosave: { appliesTo: ['input'] },
+	bgcolor: {
+		propertyName: 'bgColor',
+		appliesTo: [
+			'body',
+			'col',
+			'colgroup',
+			'marquee',
+			'table',
+			'tbody',
+			'tfoot',
+			'td',
+			'th',
+			'tr',
+		],
+	},
+	border: { appliesTo: ['img', 'object', 'table'] },
+	buffered: { appliesTo: ['audio', 'video'] },
+	challenge: { appliesTo: ['keygen'] },
+	charset: { appliesTo: ['meta', 'script'] },
+	checked: { appliesTo: ['command', 'input'] },
+	cite: { appliesTo: ['blockquote', 'del', 'ins', 'q'] },
+	class: { propertyName: 'className' },
+	code: { appliesTo: ['applet'] },
+	codebase: { propertyName: 'codeBase', appliesTo: ['applet'] },
+	color: { appliesTo: ['basefont', 'font', 'hr'] },
+	cols: { appliesTo: ['textarea'] },
+	colspan: { propertyName: 'colSpan', appliesTo: ['td', 'th'] },
+	content: { appliesTo: ['meta'] },
+	contenteditable: { propertyName: 'contentEditable' },
+	contextmenu: {},
+	controls: { appliesTo: ['audio', 'video'] },
+	coords: { appliesTo: ['area'] },
+	data: { appliesTo: ['object'] },
+	datetime: { propertyName: 'dateTime', appliesTo: ['del', 'ins', 'time'] },
+	default: { appliesTo: ['track'] },
+	defer: { appliesTo: ['script'] },
+	dir: {},
+	dirname: { propertyName: 'dirName', appliesTo: ['input', 'textarea'] },
+	disabled: {
+		appliesTo: [
+			'button',
+			'command',
+			'fieldset',
+			'input',
+			'keygen',
+			'optgroup',
+			'option',
+			'select',
+			'textarea',
+		],
+	},
+	download: { appliesTo: ['a', 'area'] },
+	draggable: {},
+	dropzone: {},
+	enctype: { appliesTo: ['form'] },
+	for: { propertyName: 'htmlFor', appliesTo: ['label', 'output'] },
+	form: {
+		appliesTo: [
+			'button',
+			'fieldset',
+			'input',
+			'keygen',
+			'label',
+			'meter',
+			'object',
+			'output',
+			'progress',
+			'select',
+			'textarea',
+		],
+	},
+	formaction: { appliesTo: ['input', 'button'] },
+	headers: { appliesTo: ['td', 'th'] },
+	height: {
+		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+	},
+	hidden: {},
+	high: { appliesTo: ['meter'] },
+	href: { appliesTo: ['a', 'area', 'base', 'link'] },
+	hreflang: { appliesTo: ['a', 'area', 'link'] },
+	'http-equiv': { propertyName: 'httpEquiv', appliesTo: ['meta'] },
+	icon: { appliesTo: ['command'] },
+	id: {},
+	indeterminate: { appliesTo: ['input'] },
+	ismap: { propertyName: 'isMap', appliesTo: ['img'] },
+	itemprop: {},
+	keytype: { appliesTo: ['keygen'] },
+	kind: { appliesTo: ['track'] },
+	label: { appliesTo: ['track'] },
+	lang: {},
+	language: { appliesTo: ['script'] },
+	loop: { appliesTo: ['audio', 'bgsound', 'marquee', 'video'] },
+	low: { appliesTo: ['meter'] },
+	manifest: { appliesTo: ['html'] },
+	max: { appliesTo: ['input', 'meter', 'progress'] },
+	maxlength: { propertyName: 'maxLength', appliesTo: ['input', 'textarea'] },
+	media: { appliesTo: ['a', 'area', 'link', 'source', 'style'] },
+	method: { appliesTo: ['form'] },
+	min: { appliesTo: ['input', 'meter'] },
+	multiple: { appliesTo: ['input', 'select'] },
+	muted: { appliesTo: ['audio', 'video'] },
+	name: {
+		appliesTo: [
+			'button',
+			'form',
+			'fieldset',
+			'iframe',
+			'input',
+			'keygen',
+			'object',
+			'output',
+			'select',
+			'textarea',
+			'map',
+			'meta',
+			'param',
+		],
+	},
+	novalidate: { propertyName: 'noValidate', appliesTo: ['form'] },
+	open: { appliesTo: ['details'] },
+	optimum: { appliesTo: ['meter'] },
+	pattern: { appliesTo: ['input'] },
+	ping: { appliesTo: ['a', 'area'] },
+	placeholder: { appliesTo: ['input', 'textarea'] },
+	poster: { appliesTo: ['video'] },
+	preload: { appliesTo: ['audio', 'video'] },
+	radiogroup: { appliesTo: ['command'] },
+	readonly: { propertyName: 'readOnly', appliesTo: ['input', 'textarea'] },
+	rel: { appliesTo: ['a', 'area', 'link'] },
+	required: { appliesTo: ['input', 'select', 'textarea'] },
+	reversed: { appliesTo: ['ol'] },
+	rows: { appliesTo: ['textarea'] },
+	rowspan: { propertyName: 'rowSpan', appliesTo: ['td', 'th'] },
+	sandbox: { appliesTo: ['iframe'] },
+	scope: { appliesTo: ['th'] },
+	scoped: { appliesTo: ['style'] },
+	seamless: { appliesTo: ['iframe'] },
+	selected: { appliesTo: ['option'] },
+	shape: { appliesTo: ['a', 'area'] },
+	size: { appliesTo: ['input', 'select'] },
+	sizes: { appliesTo: ['link', 'img', 'source'] },
+	span: { appliesTo: ['col', 'colgroup'] },
+	spellcheck: {},
+	src: {
+		appliesTo: [
+			'audio',
+			'embed',
+			'iframe',
+			'img',
+			'input',
+			'script',
+			'source',
+			'track',
+			'video',
+		],
+	},
+	srcdoc: { appliesTo: ['iframe'] },
+	srclang: { appliesTo: ['track'] },
+	srcset: { appliesTo: ['img'] },
+	start: { appliesTo: ['ol'] },
+	step: { appliesTo: ['input'] },
+	style: { propertyName: 'style.cssText' },
+	summary: { appliesTo: ['table'] },
+	tabindex: { propertyName: 'tabIndex' },
+	target: { appliesTo: ['a', 'area', 'base', 'form'] },
+	title: {},
+	type: {
+		appliesTo: [
+			'button',
+			'command',
+			'embed',
+			'object',
+			'script',
+			'source',
+			'style',
+			'menu',
+		],
+	},
+	usemap: { propertyName: 'useMap', appliesTo: ['img', 'input', 'object'] },
+	value: {
+		appliesTo: [
+			'button',
+			'option',
+			'input',
+			'li',
+			'meter',
+			'progress',
+			'param',
+			'select',
+			'textarea',
+		],
+	},
+	volume: { appliesTo: ['audio', 'video'] },
+	width: {
+		appliesTo: ['canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video'],
+	},
+	wrap: { appliesTo: ['textarea'] },
+};
+
+Object.keys(attributeLookup).forEach(name => {
+	const metadata = attributeLookup[name];
+	if (!metadata.propertyName) metadata.propertyName = name;
+});
diff --git a/src/compile/render-dom/wrappers/Element/StyleAttribute.ts b/src/compile/render-dom/wrappers/Element/StyleAttribute.ts
new file mode 100644
index 0000000000..8f22df279a
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Element/StyleAttribute.ts
@@ -0,0 +1,182 @@
+import Attribute from '../../../nodes/Attribute';
+import Block from '../../Block';
+import AttributeWrapper from './Attribute';
+import Node from '../../../nodes/shared/Node';
+import ElementWrapper from '.';
+import { stringify } from '../../../../utils/stringify';
+
+export interface StyleProp {
+	key: string;
+	value: Node[];
+}
+
+export default class StyleAttributeWrapper extends AttributeWrapper {
+	node: Attribute;
+	parent: ElementWrapper;
+
+	constructor(node: Attribute, parent: ElementWrapper) {
+		super(node, parent);
+	}
+
+	render(block: Block) {
+		const styleProps = optimizeStyle(this.node.chunks);
+		if (!styleProps) return super.render(block);
+
+		styleProps.forEach((prop: StyleProp) => {
+			let value;
+
+			if (isDynamic(prop.value)) {
+				const propDependencies = new Set();
+				let shouldCache;
+
+				value =
+					((prop.value.length === 1 || prop.value[0].type === 'Text') ? '' : `"" + `) +
+					prop.value
+						.map((chunk: Node) => {
+							if (chunk.type === 'Text') {
+								return stringify(chunk.data);
+							} else {
+								const { dependencies, snippet } = chunk;
+
+								dependencies.forEach(d => {
+									propDependencies.add(d);
+								});
+
+								return chunk.getPrecedence() <= 13 ? `(${snippet})` : snippet;
+							}
+						})
+						.join(' + ');
+
+				if (propDependencies.size) {
+					const dependencies = Array.from(propDependencies);
+					const condition = (
+						(block.hasOutros ? `!#current || ` : '') +
+						dependencies.map(dependency => `changed.${dependency}`).join(' || ')
+					);
+
+					block.builders.update.addConditional(
+						condition,
+						`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
+					);
+				}
+			} else {
+				value = stringify(prop.value[0].data);
+			}
+
+			block.builders.hydrate.addLine(
+				`@setStyle(${this.parent.var}, "${prop.key}", ${value});`
+			);
+		});
+	}
+}
+
+function optimizeStyle(value: Node[]) {
+	const props: { key: string, value: Node[] }[] = [];
+	let chunks = value.slice();
+
+	while (chunks.length) {
+		const chunk = chunks[0];
+
+		if (chunk.type !== 'Text') return null;
+
+		const keyMatch = /^\s*([\w-]+):\s*/.exec(chunk.data);
+		if (!keyMatch) return null;
+
+		const key = keyMatch[1];
+
+		const offset = keyMatch.index + keyMatch[0].length;
+		const remainingData = chunk.data.slice(offset);
+
+		if (remainingData) {
+			chunks[0] = {
+				start: chunk.start + offset,
+				end: chunk.end,
+				type: 'Text',
+				data: remainingData
+			};
+		} else {
+			chunks.shift();
+		}
+
+		const result = getStyleValue(chunks);
+		if (!result) return null;
+
+		props.push({ key, value: result.value });
+		chunks = result.chunks;
+	}
+
+	return props;
+}
+
+function getStyleValue(chunks: Node[]) {
+	const value: Node[] = [];
+
+	let inUrl = false;
+	let quoteMark = null;
+	let escaped = false;
+
+	while (chunks.length) {
+		const chunk = chunks.shift();
+
+		if (chunk.type === 'Text') {
+			let c = 0;
+			while (c < chunk.data.length) {
+				const char = chunk.data[c];
+
+				if (escaped) {
+					escaped = false;
+				} else if (char === '\\') {
+					escaped = true;
+				} else if (char === quoteMark) {
+					quoteMark === null;
+				} else if (char === '"' || char === "'") {
+					quoteMark = char;
+				} else if (char === ')' && inUrl) {
+					inUrl = false;
+				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
+					inUrl = true;
+				} else if (char === ';' && !inUrl && !quoteMark) {
+					break;
+				}
+
+				c += 1;
+			}
+
+			if (c > 0) {
+				value.push({
+					type: 'Text',
+					start: chunk.start,
+					end: chunk.start + c,
+					data: chunk.data.slice(0, c)
+				});
+			}
+
+			while (/[;\s]/.test(chunk.data[c])) c += 1;
+			const remainingData = chunk.data.slice(c);
+
+			if (remainingData) {
+				chunks.unshift({
+					start: chunk.start + c,
+					end: chunk.end,
+					type: 'Text',
+					data: remainingData
+				});
+
+				break;
+			}
+		}
+
+		else {
+			value.push(chunk);
+		}
+	}
+
+	return {
+		chunks,
+		value
+	};
+}
+
+function isDynamic(value: Node[]) {
+	return value.length > 1 || value[0].type !== 'Text';
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts
new file mode 100644
index 0000000000..331efaba92
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Element/index.ts
@@ -0,0 +1,759 @@
+import Renderer from '../../Renderer';
+import Element from '../../../nodes/Element';
+import Wrapper from '../shared/wrapper';
+import Block from '../../Block';
+import Node from '../../../nodes/shared/Node';
+import { CompileOptions } from '../../../../interfaces';
+import { quotePropIfNecessary, quoteNameIfNecessary } from '../../../../utils/quoteIfNecessary';
+import isVoidElementName from '../../../../utils/isVoidElementName';
+import FragmentWrapper from '../Fragment';
+import { stringify, escapeHTML } from '../../../../utils/stringify';
+import TextWrapper from '../Text';
+import fixAttributeCasing from '../../../../utils/fixAttributeCasing';
+import deindent from '../../../../utils/deindent';
+import namespaces from '../../../../utils/namespaces';
+import AttributeWrapper from './Attribute';
+import StyleAttributeWrapper from './StyleAttribute';
+
+export default class ElementWrapper extends Wrapper {
+	node: Element;
+	fragment: FragmentWrapper;
+	attributes: AttributeWrapper[];
+	classDependencies: string[];
+
+	var: string;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Element,
+		stripWhitespace: boolean,
+		nextSibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.var = node.name;
+
+		this.classDependencies = [];
+
+		this.attributes = this.node.attributes.map(attribute => {
+			if (attribute.name === 'style') {
+				return new StyleAttributeWrapper(attribute, this);
+			}
+			return new AttributeWrapper(attribute, this);
+		});
+
+		this.fragment = new FragmentWrapper(renderer, block, node.children, this, stripWhitespace, nextSibling);
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		const { renderer } = this;
+
+		if (this.node.name === 'slot') {
+			const slotName = this.getStaticAttributeValue('name') || 'default';
+			renderer.slots.add(slotName);
+		}
+
+		if (this.node.name === 'noscript') return;
+
+		const node = this.var;
+		const nodes = parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
+
+		const slot = this.node.attributes.find((attribute: Node) => attribute.name === 'slot');
+		const prop = slot && quotePropIfNecessary(slot.chunks[0].data);
+		const initialMountNode = this.slotted ?
+			`${this.findNearest(/^InlineComponent/).var}._slotted${prop}` : // TODO this looks bonkers
+			parentNode;
+
+		block.addVariable(node);
+		const renderStatement = this.getRenderStatement();
+		block.builders.create.addLine(
+			`${node} = ${renderStatement};`
+		);
+
+		if (renderer.options.hydratable) {
+			if (parentNodes) {
+				block.builders.claim.addBlock(deindent`
+					${node} = ${this.getClaimStatement(parentNodes)};
+					var ${nodes} = @children(${this.name === 'template' ? `${node}.content` : node});
+				`);
+			} else {
+				block.builders.claim.addLine(
+					`${node} = ${renderStatement};`
+				);
+			}
+		}
+
+		if (initialMountNode) {
+			block.builders.mount.addLine(
+				`@append(${initialMountNode}, ${node});`
+			);
+
+			if (initialMountNode === 'document.head') {
+				block.builders.destroy.addLine(`@detachNode(${node});`);
+			}
+		} else {
+			block.builders.mount.addLine(`@insert(#target, ${node}, anchor);`);
+
+			// TODO we eventually need to consider what happens to elements
+			// that belong to the same outgroup as an outroing element...
+			block.builders.destroy.addConditional('detach', `@detachNode(${node});`);
+		}
+
+		// insert static children with textContent or innerHTML
+		if (!this.node.namespace && this.canUseInnerHTML && this.fragment.nodes.length > 0) {
+			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].type === 'Text') {
+				block.builders.create.addLine(
+					`${node}.textContent = ${stringify(this.fragment.nodes[0].data)};`
+				);
+			} else {
+				block.builders.create.addLine(
+					`${node}.innerHTML = ${stringify(this.fragment.nodes.map(toHTML).join(''))};`
+				);
+			}
+		} else {
+			this.fragment.nodes.forEach((child: Wrapper) => {
+				child.render(
+					block,
+					this.node.name === 'template' ? `${node}.content` : node,
+					nodes
+				);
+			});
+		}
+
+		let hasHoistedEventHandlerOrBinding = (
+			//(this.hasAncestor('EachBlock') && this.node.bindings.length > 0) ||
+			this.node.handlers.some(handler => handler.shouldHoist)
+		);
+		const eventHandlerOrBindingUsesComponent = (
+			this.node.bindings.length > 0 ||
+			this.node.handlers.some(handler => handler.usesComponent)
+		);
+
+		const eventHandlerOrBindingUsesContext = (
+			this.node.bindings.some(binding => binding.usesContext) ||
+			this.node.handlers.some(handler => handler.usesContext)
+		);
+
+		if (hasHoistedEventHandlerOrBinding) {
+			const initialProps: string[] = [];
+			const updates: string[] = [];
+
+			if (eventHandlerOrBindingUsesComponent) {
+				const component = block.alias('component');
+				initialProps.push(component === 'component' ? 'component' : `component: ${component}`);
+			}
+
+			if (eventHandlerOrBindingUsesContext) {
+				initialProps.push(`ctx`);
+				block.builders.update.addLine(`${node}._svelte.ctx = ctx;`);
+				block.maintainContext = true;
+			}
+
+			if (initialProps.length) {
+				block.builders.hydrate.addBlock(deindent`
+					${node}._svelte = { ${initialProps.join(', ')} };
+				`);
+			}
+		} else {
+			if (eventHandlerOrBindingUsesContext) {
+				block.maintainContext = true;
+			}
+		}
+
+		this.addBindings(block);
+		this.addEventHandlers(block);
+		if (this.ref) this.addRef(block);
+		this.addAttributes(block);
+		this.addTransitions(block);
+		this.addAnimation(block);
+		this.addActions(block);
+		this.addClasses(block);
+
+		if (this.initialUpdate) {
+			block.builders.mount.addBlock(this.initialUpdate);
+		}
+
+		if (nodes) {
+			block.builders.claim.addLine(
+				`${nodes}.forEach(@detachNode);`
+			);
+		}
+
+		function toHTML(wrapper: ElementWrapper | TextWrapper) {
+			if (wrapper.node.type === 'Text') {
+				return wrapper.node.parent &&
+					wrapper.node.parent.type === 'Element' &&
+					(wrapper.node.parent.name === 'script' || wrapper.node.parent.name === 'style')
+					? wrapper.node.data
+					: escapeHTML(wrapper.node.data);
+			}
+
+			if (wrapper.node.name === 'noscript') return '';
+
+			let open = `<${wrapper.node.name}`;
+
+			(<ElementWrapper>wrapper).node.attributes.forEach((attr: Node) => {
+				open += ` ${fixAttributeCasing(attr.name)}${stringifyAttributeValue(attr.chunks)}`
+			});
+
+			if (isVoidElementName(wrapper.node.name)) return open + '>';
+
+			return `${open}>${wrapper.fragment.nodes.map(toHTML).join('')}</${wrapper.name}>`;
+		}
+
+		if (renderer.options.dev) {
+			const loc = renderer.locate(this.start);
+			block.builders.hydrate.addLine(
+				`@addLoc(${this.var}, ${renderer.fileVar}, ${loc.line}, ${loc.column}, ${this.start});`
+			);
+		}
+	}
+
+	getRenderStatement() {
+		const { name, namespace } = this.node;
+
+		if (namespace === 'http://www.w3.org/2000/svg') {
+			return `@createSvgElement("${name}")`;
+		}
+
+		if (namespace) {
+			return `document.createElementNS("${namespace}", "${name}")`;
+		}
+
+		return `@createElement("${name}")`;
+	}
+
+	getClaimStatement(nodes: string) {
+		const attributes = this.node.attributes
+			.filter((attr: Node) => attr.type === 'Attribute')
+			.map((attr: Node) => `${quoteNameIfNecessary(attr.name)}: true`)
+			.join(', ');
+
+		const name = this.node.namespace
+			? this.node.name
+			: this.node.name.toUpperCase();
+
+		return `@claimElement(${nodes}, "${name}", ${attributes
+			? `{ ${attributes} }`
+			: `{}`}, ${this.node.namespace === namespaces.svg ? true : false})`;
+	}
+
+	addBindings(
+		block: Block
+	) {
+		if (this.node.bindings.length === 0) return;
+
+		if (this.name === 'select' || this.isMediaNode()) this.component.target.hasComplexBindings = true;
+
+		const needsLock = this.name !== 'input' || !/radio|checkbox|range|color/.test(this.getStaticAttributeValue('type'));
+
+		// TODO munge in constructor
+		const mungedBindings = this.bindings.map(binding => binding.munge(block));
+
+		const lock = mungedBindings.some(binding => binding.needsLock) ?
+			block.getUniqueName(`${this.var}_updating`) :
+			null;
+
+		if (lock) block.addVariable(lock, 'false');
+
+		const groups = events
+			.map(event => {
+				return {
+					events: event.eventNames,
+					bindings: mungedBindings.filter(binding => event.filter(this, binding.name))
+				};
+			})
+			.filter(group => group.bindings.length);
+
+		groups.forEach(group => {
+			const handler = block.getUniqueName(`${this.var}_${group.events.join('_')}_handler`);
+
+			const needsLock = group.bindings.some(binding => binding.needsLock);
+
+			group.bindings.forEach(binding => {
+				if (!binding.updateDom) return;
+
+				const updateConditions = needsLock ? [`!${lock}`] : [];
+				if (binding.updateCondition) updateConditions.push(binding.updateCondition);
+
+				block.builders.update.addLine(
+					updateConditions.length ? `if (${updateConditions.join(' && ')}) ${binding.updateDom}` : binding.updateDom
+				);
+			});
+
+			const usesContext = group.bindings.some(binding => binding.handler.usesContext);
+			const usesState = group.bindings.some(binding => binding.handler.usesState);
+			const usesStore = group.bindings.some(binding => binding.handler.usesStore);
+			const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
+
+			const props = new Set();
+			const storeProps = new Set();
+			group.bindings.forEach(binding => {
+				binding.handler.props.forEach(prop => {
+					props.add(prop);
+				});
+
+				binding.handler.storeProps.forEach(prop => {
+					storeProps.add(prop);
+				});
+			}); // TODO use stringifyProps here, once indenting is fixed
+
+			// media bindings — awkward special case. The native timeupdate events
+			// fire too infrequently, so we need to take matters into our
+			// own hands
+			let animation_frame;
+			if (group.events[0] === 'timeupdate') {
+				animation_frame = block.getUniqueName(`${this.var}_animationframe`);
+				block.addVariable(animation_frame);
+			}
+
+			block.builders.init.addBlock(deindent`
+				function ${handler}() {
+					${
+						animation_frame && deindent`
+							cancelAnimationFrame(${animation_frame});
+							if (!${this.var}.paused) ${animation_frame} = requestAnimationFrame(${handler});`
+					}
+					${usesStore && `var $ = #component.store.get();`}
+					${needsLock && `${lock} = true;`}
+					${mutations.length > 0 && mutations}
+					${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
+					${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
+					${needsLock && `${lock} = false;`}
+				}
+			`);
+
+			group.events.forEach(name => {
+				if (name === 'resize') {
+					// special case
+					const resize_listener = block.getUniqueName(`${this.var}_resize_listener`);
+					block.addVariable(resize_listener);
+
+					block.builders.mount.addLine(
+						`${resize_listener} = @addResizeListener(${this.var}, ${handler});`
+					);
+
+					block.builders.destroy.addLine(
+						`${resize_listener}.cancel();`
+					);
+				} else {
+					block.builders.hydrate.addLine(
+						`@addListener(${this.var}, "${name}", ${handler});`
+					);
+
+					block.builders.destroy.addLine(
+						`@removeListener(${this.var}, "${name}", ${handler});`
+					);
+				}
+			});
+
+			const allInitialStateIsDefined = group.bindings
+				.map(binding => `'${binding.object}' in ctx`)
+				.join(' && ');
+
+			if (this.name === 'select' || group.bindings.find(binding => binding.name === 'indeterminate' || binding.isReadOnlyMediaAttribute)) {
+				this.component.target.hasComplexBindings = true;
+
+				block.builders.hydrate.addLine(
+					`if (!(${allInitialStateIsDefined})) #component.root._beforecreate.push(${handler});`
+				);
+			}
+
+			if (group.events[0] === 'resize') {
+				this.component.target.hasComplexBindings = true;
+
+				block.builders.hydrate.addLine(
+					`#component.root._beforecreate.push(${handler});`
+				);
+			}
+		});
+
+		this.initialUpdate = mungedBindings.map(binding => binding.initialUpdate).filter(Boolean).join('\n');
+	}
+
+	addAttributes(block: Block) {
+		if (this.node.attributes.find(attr => attr.type === 'Spread')) {
+			this.addSpreadAttributes(block);
+			return;
+		}
+
+		this.attributes.forEach((attribute: Attribute) => {
+			if (attribute.node.name === 'class' && attribute.node.isDynamic) {
+				this.classDependencies.push(...attribute.node.dependencies);
+			}
+			attribute.render(block);
+		});
+	}
+
+	addSpreadAttributes(block: Block) {
+		const levels = block.getUniqueName(`${this.var}_levels`);
+		const data = block.getUniqueName(`${this.var}_data`);
+
+		const initialProps = [];
+		const updates = [];
+
+		this.node.attributes
+			.filter(attr => attr.type === 'Attribute' || attr.type === 'Spread')
+			.forEach(attr => {
+				const condition = attr.dependencies.size > 0
+					? `(${[...attr.dependencies].map(d => `changed.${d}`).join(' || ')})`
+					: null;
+
+				if (attr.isSpread) {
+					const { snippet, dependencies } = attr.expression;
+
+					initialProps.push(snippet);
+
+					updates.push(condition ? `${condition} && ${snippet}` : snippet);
+				} else {
+					const snippet = `{ ${quoteNameIfNecessary(attr.name)}: ${attr.getValue()} }`;
+					initialProps.push(snippet);
+
+					updates.push(condition ? `${condition} && ${snippet}` : snippet);
+				}
+			});
+
+		block.builders.init.addBlock(deindent`
+			var ${levels} = [
+				${initialProps.join(',\n')}
+			];
+
+			var ${data} = {};
+			for (var #i = 0; #i < ${levels}.length; #i += 1) {
+				${data} = @assign(${data}, ${levels}[#i]);
+			}
+		`);
+
+		block.builders.hydrate.addLine(
+			`@setAttributes(${this.var}, ${data});`
+		);
+
+		block.builders.update.addBlock(deindent`
+			@setAttributes(${this.var}, @getSpreadUpdate(${levels}, [
+				${updates.join(',\n')}
+			]));
+		`);
+	}
+
+	addEventHandlers(block: Block) {
+		const { renderer } = this;
+		const { component } = renderer;
+
+		this.node.handlers.forEach(handler => {
+			const isCustomEvent = component.events.has(handler.name);
+
+			if (handler.callee) {
+				handler.render(this.component, block, handler.shouldHoist);
+			}
+
+			const target = handler.shouldHoist ? 'this' : this.var;
+
+			// get a name for the event handler that is globally unique
+			// if hoisted, locally unique otherwise
+			const handlerName = (handler.shouldHoist ? component : block).getUniqueName(
+				`${handler.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_handler`
+			);
+
+			const component_name = block.alias('component'); // can't use #component, might be hoisted
+
+			// create the handler body
+			const handlerBody = deindent`
+				${handler.shouldHoist && (
+					handler.usesComponent || handler.usesContext
+						? `const { ${[handler.usesComponent && 'component', handler.usesContext && 'ctx'].filter(Boolean).join(', ')} } = ${target}._svelte;`
+						: null
+				)}
+
+				${handler.snippet ?
+					handler.snippet :
+					`${component_name}.fire("${handler.name}", event);`}
+			`;
+
+			if (isCustomEvent) {
+				block.addVariable(handlerName);
+
+				block.builders.hydrate.addBlock(deindent`
+					${handlerName} = %events-${handler.name}.call(${component_name}, ${this.var}, function(event) {
+						${handlerBody}
+					});
+				`);
+
+				block.builders.destroy.addLine(deindent`
+					${handlerName}.destroy();
+				`);
+			} else {
+				const handlerFunction = deindent`
+					function ${handlerName}(event) {
+						${handlerBody}
+					}
+				`;
+
+				if (handler.shouldHoist) {
+					component.target.blocks.push(handlerFunction);
+				} else {
+					block.builders.init.addBlock(handlerFunction);
+				}
+
+				block.builders.hydrate.addLine(
+					`@addListener(${this.var}, "${handler.name}", ${handlerName});`
+				);
+
+				block.builders.destroy.addLine(
+					`@removeListener(${this.var}, "${handler.name}", ${handlerName});`
+				);
+			}
+		});
+	}
+
+	addRef(block: Block) {
+		const ref = `#component.refs.${this.ref.name}`;
+
+		block.builders.mount.addLine(
+			`${ref} = ${this.var};`
+		);
+
+		block.builders.destroy.addLine(
+			`if (${ref} === ${this.var}) ${ref} = null;`
+		);
+	}
+
+	addTransitions(
+		block: Block
+	) {
+		const { intro, outro } = this;
+
+		if (!intro && !outro) return;
+
+		if (intro === outro) {
+			const name = block.getUniqueName(`${this.var}_transition`);
+			const snippet = intro.expression
+				? intro.expression.snippet
+				: '{}';
+
+			block.addVariable(name);
+
+			const fn = `%transitions-${intro.name}`;
+
+			block.builders.intro.addConditional(`#component.root._intro`, deindent`
+				if (${name}) ${name}.invalidate();
+
+				#component.root._aftercreate.push(() => {
+					if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
+					${name}.run(1);
+				});
+			`);
+
+			block.builders.outro.addBlock(deindent`
+				if (!${name}) ${name} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
+				${name}.run(0, () => {
+					#outrocallback();
+					${name} = null;
+				});
+			`);
+
+			block.builders.destroy.addConditional('detach', `if (${name}) ${name}.abort();`);
+		} else {
+			const introName = intro && block.getUniqueName(`${this.var}_intro`);
+			const outroName = outro && block.getUniqueName(`${this.var}_outro`);
+
+			if (intro) {
+				block.addVariable(introName);
+				const snippet = intro.expression
+					? intro.expression.snippet
+					: '{}';
+
+				const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
+
+				if (outro) {
+					block.builders.intro.addBlock(deindent`
+						if (${introName}) ${introName}.abort(1);
+						if (${outroName}) ${outroName}.abort(1);
+					`);
+				}
+
+				block.builders.intro.addConditional(`#component.root._intro`, deindent`
+					#component.root._aftercreate.push(() => {
+						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
+						${introName}.run(1);
+					});
+				`);
+			}
+
+			if (outro) {
+				block.addVariable(outroName);
+				const snippet = outro.expression
+					? outro.expression.snippet
+					: '{}';
+
+				const fn = `%transitions-${outro.name}`;
+
+				block.builders.intro.addBlock(deindent`
+					if (${outroName}) ${outroName}.abort(1);
+				`);
+
+				// TODO hide elements that have outro'd (unless they belong to a still-outroing
+				// group) prior to their removal from the DOM
+				block.builders.outro.addBlock(deindent`
+					${outroName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, false);
+					${outroName}.run(0, #outrocallback);
+				`);
+
+				block.builders.destroy.addConditional('detach', `if (${outroName}) ${outroName}.abort();`);
+			}
+		}
+	}
+
+	addAnimation(block: Block) {
+		if (!this.node.animation) return;
+
+		const rect = block.getUniqueName('rect');
+		const animation = block.getUniqueName('animation');
+
+		block.addVariable(rect);
+		block.addVariable(animation);
+
+		block.builders.measure.addBlock(deindent`
+			${rect} = ${this.var}.getBoundingClientRect();
+		`);
+
+		block.builders.fix.addBlock(deindent`
+			@fixPosition(${this.var});
+			if (${animation}) ${animation}.stop();
+		`);
+
+		const params = this.node.animation.expression ? this.node.animation.expression.snippet : '{}';
+		block.builders.animate.addBlock(deindent`
+			if (${animation}) ${animation}.stop();
+			${animation} = @wrapAnimation(${this.var}, ${rect}, %animations-${this.node.animation.name}, ${params});
+		`);
+	}
+
+	addActions(block: Block) {
+		this.node.actions.forEach(action => {
+			const { expression } = action;
+			let snippet, dependencies;
+			if (expression) {
+				snippet = expression.snippet;
+				dependencies = expression.dependencies;
+			}
+
+			const name = block.getUniqueName(
+				`${action.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`
+			);
+
+			block.addVariable(name);
+			const fn = `%actions-${action.name}`;
+
+			block.builders.mount.addLine(
+				`${name} = ${fn}.call(#component, ${this.var}${snippet ? `, ${snippet}` : ''}) || {};`
+			);
+
+			if (dependencies && dependencies.size > 0) {
+				let conditional = `typeof ${name}.update === 'function' && `;
+				const deps = [...dependencies].map(dependency => `changed.${dependency}`).join(' || ');
+				conditional += dependencies.size > 1 ? `(${deps})` : deps;
+
+				block.builders.update.addConditional(
+					conditional,
+					`${name}.update.call(#component, ${snippet});`
+				);
+			}
+
+			block.builders.destroy.addLine(
+				`if (typeof ${name}.destroy === 'function') ${name}.destroy.call(#component);`
+			);
+		});
+	}
+
+	addClasses(block: Block) {
+		this.node.classes.forEach(classDir => {
+			const { expression, name } = classDir;
+			let snippet, dependencies;
+			if (expression) {
+				snippet = expression.snippet;
+				dependencies = expression.dependencies;
+			} else {
+				snippet = `ctx${quotePropIfNecessary(name)}`;
+				dependencies = [name];
+			}
+			const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`;
+
+			block.builders.hydrate.addLine(updater);
+
+			if ((dependencies && dependencies.size > 0) || this.classDependencies.length) {
+				const allDeps = this.classDependencies.concat(...dependencies);
+				const deps = allDeps.map(dependency => `changed${quotePropIfNecessary(dependency)}`).join(' || ');
+				const condition = allDeps.length > 1 ? `(${deps})` : deps;
+
+				block.builders.update.addConditional(
+					condition,
+					updater
+				);
+			}
+		});
+	}
+
+	getStaticAttributeValue(name: string) {
+		const attribute = this.node.attributes.find(
+			(attr: Attribute) => attr.type === 'Attribute' && attr.name.toLowerCase() === name
+		);
+
+		if (!attribute) return null;
+
+		if (attribute.isTrue) return true;
+		if (attribute.chunks.length === 0) return '';
+
+		if (attribute.chunks.length === 1 && attribute.chunks[0].type === 'Text') {
+			return attribute.chunks[0].data;
+		}
+
+		return null;
+	}
+
+	isMediaNode() {
+		return this.node.name === 'audio' || this.node.name === 'video';
+	}
+
+	remount(name: string) {
+		const slot = this.attributes.find(attribute => attribute.name === 'slot');
+		if (slot) {
+			const prop = quotePropIfNecessary(slot.chunks[0].data);
+			return `@append(${name}._slotted${prop}, ${this.var});`;
+		}
+
+		return `@append(${name}._slotted.default, ${this.var});`;
+	}
+
+	addCssClass(className = this.component.stylesheet.id) {
+		const classAttribute = this.attributes.find(a => a.name === 'class');
+		if (classAttribute && !classAttribute.isTrue) {
+			if (classAttribute.chunks.length === 1 && classAttribute.chunks[0].type === 'Text') {
+				(<Text>classAttribute.chunks[0]).data += ` ${className}`;
+			} else {
+				(<Node[]>classAttribute.chunks).push(
+					new Text(this.component, this, this.scope, {
+						type: 'Text',
+						data: ` ${className}`
+					})
+				);
+			}
+		} else {
+			this.attributes.push(
+				new Attribute(this.component, this, this.scope, {
+					type: 'Attribute',
+					name: 'class',
+					value: [{ type: 'Text', data: className }]
+				})
+			);
+		}
+	}
+}
+
+function stringifyAttributeValue(value: Node[] | true) {
+	if (value === true) return '';
+	if (value.length === 0) return `=""`;
+
+	const data = value[0].data;
+	return `=${JSON.stringify(data)}`;
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Fragment.ts b/src/compile/render-dom/wrappers/Fragment.ts
new file mode 100644
index 0000000000..74da5a1484
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Fragment.ts
@@ -0,0 +1,108 @@
+import Wrapper from './shared/wrapper';
+import EachBlock from './EachBlock';
+import Element from './Element';
+import MustacheTag from './MustacheTag';
+import Text from './Text';
+import Window from './Window';
+import Node from '../../nodes/shared/Node';
+import { trimStart, trimEnd } from '../../../utils/trim';
+import TextWrapper from './Text';
+import Renderer from '../Renderer';
+import Block from '../Block';
+
+const wrappers = {
+	Comment: null,
+	EachBlock,
+	Element,
+	MustacheTag,
+	Text,
+	Window
+};
+
+function link(next: Wrapper, prev: Wrapper) {
+	prev.next = next;
+	if (next) next.prev = prev;
+}
+
+export default class FragmentWrapper {
+	nodes: Wrapper[];
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		nodes: Node[],
+		parent: Wrapper,
+		stripWhitespace: boolean,
+		nextSibling: Wrapper
+	) {
+		this.nodes = [];
+
+		let lastChild: Wrapper;
+		let windowWrapper;
+
+		let i = nodes.length;
+		while (i--) {
+			const child = nodes[i];
+
+			if (!(child.type in wrappers)) {
+				throw new Error(`TODO implement ${child.type}`);
+			}
+
+			// special case — this is an easy way to remove whitespace surrounding
+			// <svelte:window/>. lil hacky but it works
+			if (child.type === 'Window') {
+				windowWrapper = new Window(renderer, block, parent, child);
+				continue;
+			}
+
+			if (child.type === 'Text') {
+				let { data } = child;
+
+				// We want to remove trailing whitespace inside an element/component/block,
+				// *unless* there is no whitespace between this node and its next sibling
+				if (this.nodes.length === 0) {
+					const shouldTrim = (
+						nextSibling ? (nextSibling.type === 'Text' && /^\s/.test(nextSibling.data)) : !child.hasAncestor('EachBlock')
+					);
+
+					if (shouldTrim) {
+						data = trimEnd(data);
+						if (!data) continue;
+					}
+				}
+
+				// glue text nodes (which could e.g. be separated by comments) together
+				if (lastChild && lastChild.type === 'Text') {
+					lastChild.data = data + lastChild.data;
+					continue;
+				}
+
+				const wrapper = new TextWrapper(renderer, block, parent, child);
+				this.nodes.unshift(wrapper);
+
+				link(lastChild, lastChild = wrapper);
+			}
+
+			else {
+				const Wrapper = wrappers[child.type];
+				if (!Wrapper) return;
+
+				const wrapper = new Wrapper(renderer, block, parent, child, stripWhitespace, lastChild || nextSibling);
+				this.nodes.unshift(wrapper);
+
+				link(lastChild, lastChild = wrapper);
+			}
+		}
+
+		if (windowWrapper) {
+			this.nodes.unshift(windowWrapper);
+			link(lastChild, windowWrapper);
+		}
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		for (let i = 0; i < this.nodes.length; i += 1) {
+			this.nodes[i].render(block, parentNode, parentNodes);
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/MustacheTag.ts b/src/compile/render-dom/wrappers/MustacheTag.ts
new file mode 100644
index 0000000000..ce6e19463e
--- /dev/null
+++ b/src/compile/render-dom/wrappers/MustacheTag.ts
@@ -0,0 +1,29 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Node from '../../nodes/shared/Node';
+import Tag from './shared/Tag';
+
+export default class MustacheTagWrapper extends Tag {
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: Node) {
+		super(renderer, block, parent, node);
+		this.cannotUseInnerHTML();
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		const { init } = this.renameThisMethod(
+			block,
+			value => `@setData(${this.var}, ${value});`
+		);
+
+		block.addElement(
+			this.var,
+			`@createText(${init})`,
+			parentNodes && `@claimText(${parentNodes}, ${init})`,
+			parentNode
+		);
+	}
+
+	remount(name: string) {
+		return `@append(${name}._slotted.default, ${this.var});`;
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Text.ts b/src/compile/render-dom/wrappers/Text.ts
new file mode 100644
index 0000000000..726f5cd74d
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Text.ts
@@ -0,0 +1,59 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Text from '../../nodes/Text';
+import Wrapper from './shared/wrapper';
+import { CompileOptions } from '../../../interfaces';
+import { stringify } from '../../../utils/stringify';
+
+// Whitespace inside one of these elements will not result in
+// a whitespace node being created in any circumstances. (This
+// list is almost certainly very incomplete)
+const elementsWithoutText = new Set([
+	'audio',
+	'datalist',
+	'dl',
+	'optgroup',
+	'select',
+	'video',
+]);
+
+// TODO this should probably be in Fragment
+function shouldSkip(node: Text) {
+	if (/\S/.test(node.data)) return false;
+
+	const parentElement = node.findNearest(/(?:Element|InlineComponent|Head)/);
+	if (!parentElement) return false;
+
+	if (parentElement.type === 'Head') return true;
+	if (parentElement.type === 'InlineComponent') return parentElement.children.length === 1 && node === parentElement.children[0];
+
+	return parentElement.namespace || elementsWithoutText.has(parentElement.name);
+}
+
+export default class TextWrapper extends Wrapper {
+	node: Text;
+	var: string;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Text
+	) {
+		super(renderer, block, parent, node);
+		this.var = 'text';
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		block.addElement(
+			this.var,
+			`@createText(${stringify(this.node.data)})`,
+			parentNodes && `@claimText(${parentNodes}, ${stringify(this.node.data)})`,
+			parentNode
+		);
+	}
+
+	remount(name: string) {
+		return `@append(${name}._slotted.default, ${this.var});`;
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/Window.ts b/src/compile/render-dom/wrappers/Window.ts
new file mode 100644
index 0000000000..24014df081
--- /dev/null
+++ b/src/compile/render-dom/wrappers/Window.ts
@@ -0,0 +1,198 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Node from '../../nodes/shared/Node';
+import Wrapper from './shared/wrapper';
+import deindent from '../../../utils/deindent';
+
+const associatedEvents = {
+	innerWidth: 'resize',
+	innerHeight: 'resize',
+	outerWidth: 'resize',
+	outerHeight: 'resize',
+
+	scrollX: 'scroll',
+	scrollY: 'scroll',
+};
+
+const properties = {
+	scrollX: 'pageXOffset',
+	scrollY: 'pageYOffset'
+};
+
+const readonly = new Set([
+	'innerWidth',
+	'innerHeight',
+	'outerWidth',
+	'outerHeight',
+	'online',
+]);
+
+export default class WindowWrapper extends Wrapper {
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: Node) {
+		super(renderer, block, parent, node);
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		const { renderer } = this;
+		const { component } = renderer;
+
+		const events = {};
+		const bindings: Record<string, string> = {};
+
+		this.node.handlers.forEach(handler => {
+			// TODO verify that it's a valid callee (i.e. built-in or declared method)
+			component.addSourcemapLocations(handler.expression);
+
+			const isCustomEvent = component.events.has(handler.name);
+
+			let usesState = handler.dependencies.size > 0;
+
+			handler.render(component, block, false); // TODO hoist?
+
+			const handlerName = block.getUniqueName(`onwindow${handler.name}`);
+			const handlerBody = deindent`
+				${usesState && `var ctx = #component.get();`}
+				${handler.snippet};
+			`;
+
+			if (isCustomEvent) {
+				// TODO dry this out
+				block.addVariable(handlerName);
+
+				block.builders.hydrate.addBlock(deindent`
+					${handlerName} = %events-${handler.name}.call(#component, window, function(event) {
+						${handlerBody}
+					});
+				`);
+
+				block.builders.destroy.addLine(deindent`
+					${handlerName}.destroy();
+				`);
+			} else {
+				block.builders.init.addBlock(deindent`
+					function ${handlerName}(event) {
+						${handlerBody}
+					}
+					window.addEventListener("${handler.name}", ${handlerName});
+				`);
+
+				block.builders.destroy.addBlock(deindent`
+					window.removeEventListener("${handler.name}", ${handlerName});
+				`);
+			}
+		});
+
+		this.node.bindings.forEach(binding => {
+			// in dev mode, throw if read-only values are written to
+			if (readonly.has(binding.name)) {
+				renderer.readonly.add(binding.value.node.name);
+			}
+
+			bindings[binding.name] = binding.value.node.name;
+
+			// bind:online is a special case, we need to listen for two separate events
+			if (binding.name === 'online') return;
+
+			const associatedEvent = associatedEvents[binding.name];
+			const property = properties[binding.name] || binding.name;
+
+			if (!events[associatedEvent]) events[associatedEvent] = [];
+			events[associatedEvent].push(
+				`${binding.value.node.name}: this.${property}`
+			);
+
+			// add initial value
+			renderer.metaBindings.push(
+				`this._state.${binding.value.node.name} = window.${property};`
+			);
+		});
+
+		const lock = block.getUniqueName(`window_updating`);
+		const clear = block.getUniqueName(`clear_window_updating`);
+		const timeout = block.getUniqueName(`window_updating_timeout`);
+
+		Object.keys(events).forEach(event => {
+			const handlerName = block.getUniqueName(`onwindow${event}`);
+			const props = events[event].join(',\n');
+
+			if (event === 'scroll') {
+				// TODO other bidirectional bindings...
+				block.addVariable(lock, 'false');
+				block.addVariable(clear, `function() { ${lock} = false; }`);
+				block.addVariable(timeout);
+			}
+
+			const handlerBody = deindent`
+				${event === 'scroll' && deindent`
+					if (${lock}) return;
+					${lock} = true;
+				`}
+				${component.options.dev && `component._updatingReadonlyProperty = true;`}
+
+				#component.set({
+					${props}
+				});
+
+				${component.options.dev && `component._updatingReadonlyProperty = false;`}
+				${event === 'scroll' && `${lock} = false;`}
+			`;
+
+			block.builders.init.addBlock(deindent`
+				function ${handlerName}(event) {
+					${handlerBody}
+				}
+				window.addEventListener("${event}", ${handlerName});
+			`);
+
+			block.builders.destroy.addBlock(deindent`
+				window.removeEventListener("${event}", ${handlerName});
+			`);
+		});
+
+		// special case... might need to abstract this out if we add more special cases
+		if (bindings.scrollX || bindings.scrollY) {
+			block.builders.init.addBlock(deindent`
+				#component.on("state", ({ changed, current }) => {
+					if (${
+						[bindings.scrollX, bindings.scrollY].map(
+							binding => binding && `changed["${binding}"]`
+						).filter(Boolean).join(' || ')
+					}) {
+						${lock} = true;
+						clearTimeout(${timeout});
+						window.scrollTo(${
+							bindings.scrollX ? `current["${bindings.scrollX}"]` : `window.pageXOffset`
+						}, ${
+							bindings.scrollY ? `current["${bindings.scrollY}"]` : `window.pageYOffset`
+						});
+						${timeout} = setTimeout(${clear}, 100);
+					}
+				});
+			`);
+		}
+
+		// another special case. (I'm starting to think these are all special cases.)
+		if (bindings.online) {
+			const handlerName = block.getUniqueName(`onlinestatuschanged`);
+			block.builders.init.addBlock(deindent`
+				function ${handlerName}(event) {
+					${component.options.dev && `component._updatingReadonlyProperty = true;`}
+					#component.set({ ${bindings.online}: navigator.onLine });
+					${component.options.dev && `component._updatingReadonlyProperty = false;`}
+				}
+				window.addEventListener("online", ${handlerName});
+				window.addEventListener("offline", ${handlerName});
+			`);
+
+			// add initial value
+			renderer.metaBindings.push(
+				`this._state.${bindings.online} = navigator.onLine;`
+			);
+
+			block.builders.destroy.addBlock(deindent`
+				window.removeEventListener("online", ${handlerName});
+				window.removeEventListener("offline", ${handlerName});
+			`);
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/shared/Tag.ts b/src/compile/render-dom/wrappers/shared/Tag.ts
new file mode 100644
index 0000000000..dc4eb0bb84
--- /dev/null
+++ b/src/compile/render-dom/wrappers/shared/Tag.ts
@@ -0,0 +1,64 @@
+import Wrapper from './Wrapper';
+import Renderer from '../../Renderer';
+import Block from '../../Block';
+import Node from '../../../nodes/shared/Node';
+
+export default class Tag extends Wrapper {
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: Node) {
+		super(renderer, block, parent, node);
+		this.cannotUseInnerHTML();
+
+		this.var = this.type === 'MustacheTag' ? 'text' : 'raw';
+		block.addDependencies(node.expression.dependencies);
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		const { init } = this.renameThisMethod(
+			block,
+			value => `@setData(${this.var}, ${value});`
+		);
+
+		block.addElement(
+			this.var,
+			`@createText(${init})`,
+			parentNodes && `@claimText(${parentNodes}, ${init})`,
+			parentNode
+		);
+	}
+
+	renameThisMethod(
+		block: Block,
+		update: ((value: string) => string)
+	) {
+		const { snippet, dependencies } = this.node.expression;
+
+		const value = this.node.shouldCache && block.getUniqueName(`${this.var}_value`);
+		const content = this.node.shouldCache ? value : snippet;
+
+		if (this.node.shouldCache) block.addVariable(value, snippet);
+
+		if (dependencies.size) {
+			const changedCheck = (
+				(block.hasOutros ? `!#current || ` : '') +
+				[...dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')
+			);
+
+			const updateCachedValue = `${value} !== (${value} = ${snippet})`;
+
+			const condition = this.node.shouldCache ?
+				(dependencies.size ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue) :
+				changedCheck;
+
+			block.builders.update.addConditional(
+				condition,
+				update(content)
+			);
+		}
+
+		return { init: content };
+	}
+
+	remount(name: string) {
+		return `@append(${name}._slotted.default, ${this.var});`;
+	}
+}
\ No newline at end of file
diff --git a/src/compile/render-dom/wrappers/shared/Wrapper.ts b/src/compile/render-dom/wrappers/shared/Wrapper.ts
new file mode 100644
index 0000000000..bdb26d700c
--- /dev/null
+++ b/src/compile/render-dom/wrappers/shared/Wrapper.ts
@@ -0,0 +1,53 @@
+import Renderer from '../../Renderer';
+import Node from '../../../nodes/shared/Node';
+import { CompileOptions } from '../../../../interfaces';
+import Block from '../../Block';
+
+export default class Wrapper {
+	renderer: Renderer;
+	parent: Wrapper;
+	node: Node;
+
+	prev: Wrapper | null;
+	next: Wrapper | null;
+
+	canUseInnerHTML: boolean;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Node
+	) {
+		this.renderer = renderer;
+		this.parent = parent;
+		this.node = node;
+
+		this.canUseInnerHTML = !renderer.options.hydratable;
+
+		block.wrappers.push(this);
+	}
+
+	cannotUseInnerHTML() {
+		this.canUseInnerHTML = false;
+		if (this.parent) this.parent.cannotUseInnerHTML();
+	}
+
+	getUpdateMountNode(anchor: string) {
+		return (this.parent && this.parent.isDomNode())
+			? this.parent.var
+			: `${anchor}.parentNode`;
+	}
+
+	isDomNode() {
+		return (
+			this.node.type === 'Element' ||
+			this.node.type === 'Text' ||
+			this.node.type === 'MustacheTag'
+		);
+	}
+
+	render(block: Block, parentNode: string, parentNodes: string) {
+		throw new Error(`render method not implemented by subclass ${this.node.type}`);
+	}
+}
\ No newline at end of file