From 976c278d379f46363ed168082f5f6c379288bbe4 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 1 Jan 2018 23:02:39 -0500
Subject: [PATCH] prevent main fragment being created twice - fixes #1063

---
 src/generators/dom/index.ts                     |  3 +++
 .../custom-elements/samples/nested/Counter.html | 13 +++++++++++++
 test/custom-elements/samples/nested/main.html   | 12 ++++++++++++
 test/custom-elements/samples/nested/test.js     | 17 +++++++++++++++++
 .../css-shadow-dom-keyframes/expected-bundle.js |  1 +
 .../css-shadow-dom-keyframes/expected.js        |  1 +
 6 files changed, 47 insertions(+)
 create mode 100644 test/custom-elements/samples/nested/Counter.html
 create mode 100644 test/custom-elements/samples/nested/main.html
 create mode 100644 test/custom-elements/samples/nested/test.js

diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 487006ad53..3a21e356f5 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -97,6 +97,9 @@ export default function dom(
 	parsed.html.build();
 	const { block } = parsed.html;
 
+	// prevent fragment being created twice (#1063)
+	if (options.customElement) block.builders.create.addLine(`this.c = @noop;`);
+
 	generator.stylesheet.warnOnUnusedSelectors(options.onwarn);
 
 	const builder = new CodeBuilder();
diff --git a/test/custom-elements/samples/nested/Counter.html b/test/custom-elements/samples/nested/Counter.html
new file mode 100644
index 0000000000..fa6132f0f5
--- /dev/null
+++ b/test/custom-elements/samples/nested/Counter.html
@@ -0,0 +1,13 @@
+<button on:click='set({ count: count + 1 })'>count: {{count}}</button>
+
+<script>
+	export default {
+		tag: 'my-counter',
+
+		data() {
+			return {
+				count: 0
+			};
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/custom-elements/samples/nested/main.html b/test/custom-elements/samples/nested/main.html
new file mode 100644
index 0000000000..3be7e91177
--- /dev/null
+++ b/test/custom-elements/samples/nested/main.html
@@ -0,0 +1,12 @@
+<Counter bind:count/>
+<p>clicked {{count}} times</p>
+
+<script>
+	import Counter from './Counter.html';
+
+	export default {
+		tag: 'my-app',
+
+		components: { Counter }
+	};
+</script>
\ No newline at end of file
diff --git a/test/custom-elements/samples/nested/test.js b/test/custom-elements/samples/nested/test.js
new file mode 100644
index 0000000000..b9303f1e26
--- /dev/null
+++ b/test/custom-elements/samples/nested/test.js
@@ -0,0 +1,17 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	target.innerHTML = '<my-app/>';
+	const el = target.querySelector('my-app');
+	const counter = el.shadowRoot.querySelector('my-counter');
+	const button = counter.shadowRoot.querySelector('button');
+
+	assert.equal(counter.count, 0);
+	assert.equal(counter.shadowRoot.innerHTML, `<button>count: 0</button>`);
+
+	button.dispatchEvent(new MouseEvent('click'));
+
+	assert.equal(counter.count, 1);
+	assert.equal(counter.shadowRoot.innerHTML, `<button>count: 1</button>`);
+}
\ No newline at end of file
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
index c0b7861a63..3edee605c1 100644
--- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
@@ -188,6 +188,7 @@ function create_main_fragment(state, component) {
 		c: function create() {
 			div = createElement("div");
 			div.textContent = "fades in";
+			this.c = noop;
 		},
 
 		m: function mount(target, anchor) {
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js
index d921b0e79f..496586e632 100644
--- a/test/js/samples/css-shadow-dom-keyframes/expected.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -8,6 +8,7 @@ function create_main_fragment(state, component) {
 		c: function create() {
 			div = createElement("div");
 			div.textContent = "fades in";
+			this.c = noop;
 		},
 
 		m: function mount(target, anchor) {