diff --git a/compiler/generate/index.js b/compiler/generate/index.js
index cf2e17bbf7..5cb4689074 100644
--- a/compiler/generate/index.js
+++ b/compiler/generate/index.js
@@ -489,6 +489,10 @@ export default function generate ( parsed, source, options ) {
 				state = {};
 			};
 
+			this.appendChild = function appendChild ( child ) {
+				this.yield.appendChild(child);
+			}
+
 			${initStatements.join( '\n\n' )}
 		}
 	` );
diff --git a/compiler/generate/visitors/MustacheTag.js b/compiler/generate/visitors/MustacheTag.js
index a7078e1e28..e3dcca73d3 100644
--- a/compiler/generate/visitors/MustacheTag.js
+++ b/compiler/generate/visitors/MustacheTag.js
@@ -3,14 +3,25 @@ import deindent from '../utils/deindent.js';
 export default {
 	enter ( generator, node ) {
 		const name = generator.current.counter( 'text' );
+		const { snippet } = generator.contextualise( node.expression );
 
 		generator.addSourcemapLocations( node.expression );
-		const { snippet } = generator.contextualise( node.expression );
 
-		generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
+		if (node.expression.name === 'yield') {
+			if (generator.hasYield === undefined) {
+				generator.hasYield	= true;
+				generator.current.initStatements.push( deindent`
+					component.yield = ${generator.current.target};
+				` );
+			} else {
+				throw new Error( `Only one {{yield}} per component.` );
+			}
+		} else {
+			generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
 
-		generator.current.updateStatements.push( deindent`
-			${name}.data = ${snippet};
-		` );
+			generator.current.updateStatements.push( deindent`
+				${name}.data = ${snippet};
+			` );
+		}
 	}
 };
diff --git a/test/compiler/component-yield-one/_config.js b/test/compiler/component-yield-one/_config.js
new file mode 100644
index 0000000000..e4d34ffdb6
--- /dev/null
+++ b/test/compiler/component-yield-one/_config.js
@@ -0,0 +1,5 @@
+export default {
+	compileError: function ( assert, err ) {
+		assert.equal('Error: Only one {{yield}} per component.', err)
+	}
+};
diff --git a/test/compiler/component-yield-one/main.html b/test/compiler/component-yield-one/main.html
new file mode 100644
index 0000000000..012a14c3ef
--- /dev/null
+++ b/test/compiler/component-yield-one/main.html
@@ -0,0 +1,2 @@
+<p>{{yield}}</p>
+<p>{{yield}}</p>
diff --git a/test/compiler/component-yield/Widget.html b/test/compiler/component-yield/Widget.html
new file mode 100644
index 0000000000..2528571ca1
--- /dev/null
+++ b/test/compiler/component-yield/Widget.html
@@ -0,0 +1 @@
+<div class="sidebar-widget">{{yield}}</div>
diff --git a/test/compiler/component-yield/_config.js b/test/compiler/component-yield/_config.js
new file mode 100644
index 0000000000..0b2f9bebff
--- /dev/null
+++ b/test/compiler/component-yield/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<main><div class="sidebar-widget">Hello Hello</div></main>',
+	test ( assert, component, target ) {
+		component.set({ a: 'World' });
+		assert.equal( component.get( 'a' ), 'World' );
+		assert.equal( target.innerHTML, '<main><div class="sidebar-widget">Hello World</div></main>' );
+	}
+};
diff --git a/test/compiler/component-yield/main.html b/test/compiler/component-yield/main.html
new file mode 100644
index 0000000000..a6b006660a
--- /dev/null
+++ b/test/compiler/component-yield/main.html
@@ -0,0 +1,16 @@
+<main>
+  <Widget>Hello {{a}}</Widget>
+</main>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+    data(){
+      return {
+        a: "Hello"
+      }
+    }
+	};
+</script>
diff --git a/test/test.js b/test/test.js
index 1738c5e5ad..40c58472cd 100644
--- a/test/test.js
+++ b/test/test.js
@@ -230,7 +230,7 @@ describe( 'svelte', () => {
 					compiled = svelte.compile( source );
 				} catch ( err ) {
 					if ( config.compileError ) {
-						config.compileError( err );
+						config.compileError( assert, err );
 						return;
 					} else {
 						throw err;