Merge pull request #1064 from sveltejs/gh-1063

prevent main fragment being created twice

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();

test/custom-elements/index.js

@@ -19,6 +19,10 @@ describe('custom-elements', function() {
 
 	const nightmare = new Nightmare({ show: false });
 
+	nightmare.on('console', (type, ...args) => {
+		console[type](...args);
+	});
+
 	let svelte;
 	let server;
 	let bundle;

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>

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>

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>`);
+}

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) {

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) {