From f6591eb76b6803873bb3bf64da8ebd03549a0032 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sun, 12 Mar 2017 12:48:11 +0200
Subject: [PATCH 1/2] (test) update test to account for child components

---
 .../samples/render-in-iframe/Widget.html      |  7 +++++++
 .../samples/render-in-iframe/_config.js       | 16 +++++++--------
 .../samples/render-in-iframe/main.html        | 20 +++++++++++++++----
 3 files changed, 30 insertions(+), 13 deletions(-)
 create mode 100644 test/generator/samples/render-in-iframe/Widget.html

diff --git a/test/generator/samples/render-in-iframe/Widget.html b/test/generator/samples/render-in-iframe/Widget.html
new file mode 100644
index 0000000000..1d893b8bcd
--- /dev/null
+++ b/test/generator/samples/render-in-iframe/Widget.html
@@ -0,0 +1,7 @@
+<p>test</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/test/generator/samples/render-in-iframe/_config.js b/test/generator/samples/render-in-iframe/_config.js
index 190a2b57de..25f3a6bf54 100644
--- a/test/generator/samples/render-in-iframe/_config.js
+++ b/test/generator/samples/render-in-iframe/_config.js
@@ -1,21 +1,19 @@
 export default {
 	test ( assert, component, target, window ) {
+		const testStyles = ([control, test]) => {
+			assert.equal( window.getComputedStyle( control ).color, 'blue' );
+			assert.equal( window.getComputedStyle( test ).color, 'red' );
+		};
+
 		const iframe = window.document.createElement('iframe');
 		window.document.body.appendChild(iframe);
-
 		const otherTarget = iframe.contentWindow.document.body;
 
 		new component.constructor({
 			target: otherTarget
 		});
 
-		assert.equal(
-			window.getComputedStyle(target.querySelector('h1')).color,
-			'rgb(255, 0, 0)'
-		);
-		assert.equal(
-			window.getComputedStyle(otherTarget.querySelector('h1')).color,
-			'rgb(255, 0, 0)'
-		);
+		testStyles(target.querySelectorAll( 'p' ));
+		testStyles(otherTarget.querySelectorAll( 'p' ));
 	}
 };
diff --git a/test/generator/samples/render-in-iframe/main.html b/test/generator/samples/render-in-iframe/main.html
index c67978fa51..5dbaac8827 100644
--- a/test/generator/samples/render-in-iframe/main.html
+++ b/test/generator/samples/render-in-iframe/main.html
@@ -1,6 +1,18 @@
-<h1>Just some static HTML</h1>
+<p>control</p>
+<div>
+	<Widget/>
+</div>
+
 <style>
-h1 {
-	color: rgb(255, 0, 0);
-}
+	p {
+		color: blue;
+	}
 </style>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>

From f1e47e5faa005d62016b49b82d680047aae9b584 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sun, 12 Mar 2017 11:15:56 +0200
Subject: [PATCH 2/2] (fix:css) add the component's css using a render hook

We have to delay the appending of the css until the whole component tree has been added to the DOM, so that the `target.ownerDocument` property points to the correct document.
---
 src/generators/dom/index.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js
index 51067279ac..0367243cbc 100644
--- a/src/generators/dom/index.js
+++ b/src/generators/dom/index.js
@@ -207,8 +207,19 @@ export default function dom ( parsed, source, options, names ) {
 		_set: new CodeBuilder()
 	};
 
-	if ( parsed.css && options.css !== false ) {
-		generator.current.builders.mount.addLine( `if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument );` );
+	const includeCss = parsed.css && options.css !== false;
+
+	if ( includeCss ) {
+		generator.current.builders.mount.addBlock( deindent`
+			var _addCss = function() {
+				if ( !target.ownerDocument.__sveltecss_${parsed.hash} ) addCss( target.ownerDocument );
+			}
+			if ( component._root ) {
+				component._root._renderHooks.push({ fn: _addCss, context: this });
+			} else {
+				component._renderHooks.push({ fn: _addCss, context: this })
+			}
+		` );
 
 		builders.main.addBlock( deindent`
 			function addCss ( document ) {
@@ -272,7 +283,7 @@ export default function dom ( parsed, source, options, names ) {
 
 	builders.init.addLine( `this._torndown = false;` );
 
-	if ( generator.hasComponents ) {
+	if ( generator.hasComponents || includeCss ) {
 		builders.init.addLine( `this._renderHooks = [];` );
 	}
 
@@ -292,11 +303,13 @@ export default function dom ( parsed, source, options, names ) {
 		` );
 	}
 
-	if ( generator.hasComponents ) {
+	if ( generator.hasComponents || includeCss ) {
 		const statement = `this._flush();`;
 
 		builders.init.addBlock( statement );
-		builders._set.addBlock( statement );
+		if ( generator.hasComponents ) {
+			builders._set.addBlock( statement );
+		}
 	}
 
 	if ( templateProperties.oncreate ) {