append host element, not contents, when component is nested

src/generators/dom/index.ts

@@ -142,7 +142,7 @@ export default function dom(
 		? `@proto `
 		: deindent`
 		{
-			${['destroy', 'get', 'fire', 'observe', 'on', 'set', '_set', 'teardown']
+			${['destroy', 'get', 'fire', 'observe', 'on', 'set', 'teardown', '_set', '_mount', '_unmount']
 				.map(n => `${n}: @${n === 'teardown' ? 'destroy' : n}`)
 				.join(',\n')}
 		}`;
@@ -222,17 +222,15 @@ export default function dom(
 					this._fragment.create();
 				`}
 			this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( ${target}, ${anchor} );
-		}
 
-		${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
-			if ( !options._root ) {
+			${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
 				${generator.hasComponents && `this._lock = true;`}
 				${(generator.hasComponents || generator.hasComplexBindings) && `@callAll(this._beforecreate);`}
 				${(generator.hasComponents || templateProperties.oncreate) && `@callAll(this._oncreate);`}
 				${(generator.hasComponents || generator.hasIntroTransitions) && `@callAll(this._aftercreate);`}
 				${generator.hasComponents && `this._lock = false;`}
-			}
-		`}
+			`}
+		}
 	`;
 
 	if (generator.customElement) {
@@ -265,19 +263,29 @@ export default function dom(
 			}
 
 			customElements.define('${generator.tag}', ${name});
+			@assign( ${prototypeBase}, ${proto}, {
+				_mount(target, anchor) {
+					this._fragment.mount(this.shadowRoot, null);
+					target.insertBefore(this, anchor);
+				},
+
+				_unmount() {
+					this.parentNode.removeChild(this);
+				}
+			});
 		`);
 	} else {
 		builder.addBlock(deindent`
 			function ${name} ( options ) {
 				${constructorBody}
 			}
+
+			@assign( ${prototypeBase}, ${proto});
 		`);
 	}
 
 	// TODO deprecate component.teardown()
 	builder.addBlock(deindent`
-		@assign( ${prototypeBase}, ${proto});
-
 		${options.dev && deindent`
 			${name}.prototype._checkReadOnly = function _checkReadOnly ( newState ) {
 				${Array.from(generator.readonly).map(

src/generators/dom/preprocess.ts

@@ -466,8 +466,7 @@ export default function preprocess(
 	const state: State = {
 		namespace,
 		parentNode: null,
-		parentNodes: 'nodes',
-		isTopLevel: true,
+		parentNodes: 'nodes'
 	};
 
 	generator.blocks.push(block);

src/generators/dom/visitors/Component.ts

@@ -234,10 +234,10 @@ export default function visitComponent(
 	);
 
 	block.builders.mount.addLine(
-		`${name}._fragment.mount( ${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'} );`
+		`${name}._mount( ${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'} );`
 	);
 
-	if (!state.parentNode) block.builders.unmount.addLine(`${name}._fragment.unmount();`);
+	if (!state.parentNode) block.builders.unmount.addLine(`${name}._unmount();`);
 
 	block.builders.destroy.addLine(`${name}.destroy( false );`);
 

src/shared/index.js

@@ -163,6 +163,14 @@ export function callAll(fns) {
 	while (fns && fns.length) fns.pop()();
 }
 
+export function _mount(target, anchor) {
+	this._fragment.mount(target, anchor);
+}
+
+export function _unmount() {
+	this._fragment.unmount();
+}
+
 export var proto = {
 	destroy: destroy,
 	get: get,
@@ -172,7 +180,9 @@ export var proto = {
 	set: set,
 	teardown: destroy,
 	_recompute: noop,
-	_set: _set
+	_set: _set,
+	_mount: _mount,
+	_unmount: _unmount
 };
 
 export var protoDev = {
@@ -184,5 +194,7 @@ export var protoDev = {
 	set: set,
 	teardown: destroyDev,
 	_recompute: noop,
-	_set: _setDev
+	_set: _setDev,
+	_mount: _mount,
+	_unmount: _unmount
 };